Setting global configuration for angular datatables

Question

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

Martin Godzina · Accepted Answer · 2021-09-22 11:12:05Z

1

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

edited Sep 22, 2021 at 11:12

answered Sep 22, 2021 at 10:46

Martin Godzina

1,59512 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Christopher Smit Over a year ago

Hi Martin, thanks. However, when I try to add this to the environment.ts file the DataTables.Settings throws the error "Cannot use namespace 'DataTables' as a value." and the export throws the error "Declaration or statement expected."

Martin Godzina Over a year ago

You have to define either a type or an interface instead using DataTables.Settings. Could you please show whats behind 'DataTables.Settings'

Christopher Smit Over a year ago

It works if I add it like this. This what you meant?

export const environment = {     production: false,     dtOptions: {         language: {             paginate: {                 first: "",                 previous: "<<",                 next: ">>",                 last: ""             }         },         lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]     } };

And then I am able to assign it in my component like this: dtOptions: DataTables.Settings = environment.dtOptions;

Martin Godzina Over a year ago

Yes somehow i forgot to add the const keyword. I´ll update the anwser

Collectives™ on Stack Overflow

Setting global configuration for angular datatables

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related