Setting global configuration for angular datatables-CodePudding

I'm a little new to angular and was wondering how I can set the global configuration for datatables. Currently it seems I can only set it within each component that need to use it, but this is clearly bad practice. Is there any way to set the configuration globally and have it be available to all component templates?

I want to be able to set the below in a single location and have any component template access it through [dt-options]="dtOptions"

dtOptions: DataTables.Settings = {
    language: {
        paginate: {
            first: "",
            previous: "<<",
            next: ">>",
            last: ""
        }
    },
    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]
}

Hope this makes sense

Angular version: 12.2.3

Datatables version: 12.0.0

CodePudding user response：

You could create environment.ts files. This files then can be imported inside your component.

// inside environment.ts    
export const dtOptions = {
        language: {
            paginate: {
                first: "",
                previous: "<<",
                next: ">>",
                last: ""
            }
        },
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]
    }

Use your configuration inside your components like here:

import { dtOptions} from '../path/to/environment.ts';

@Component({
  ...
})
export class FilterComponent implements OnInit {
   ngOnInit() {
     console.log(dtOptions.language);
   }
}

It is also possible to create different environment configurations for each stage configuration defined in angular.json.

Angular docs