Topic: How can I assign colors to datatable in Angular 12

frankvdsm priority asked 2 years ago


How can I assign my builded datatable properties to my table in Angular.

Actual behavior

not exucuted

Resources (screenshots, code snippets etc.)

Grzegorz Bujański staff answered 2 years ago

Do you mean changing the color of a cell or text? You can use ngStyle:

In your HTML:

    <div class="datatable mt-4">
        class="table datatable-table"
        <thead class="datatable-header">
            <th *ngFor="let header of headers" [mdbTableSortHeader]="header" scope="col">
              {{ header | titlecase }}
        <tbody class="datatable-body">
          <tr *ngFor="let data of" scope="row">
              {{ }}
              {{ data.position }}
            <td [ngStyle]="{'background-color': == 'Edinburgh' ? 'red' : ''}">
              {{ }}
              {{ data.age }}
              {{ data.startDate }}
              {{ data.salary }}
      <mdb-table-pagination #pagination></mdb-table-pagination>

In your TS:

dataSource: Person[] = [
      name: 'Tiger Nixon',
      position: 'System Architect',
      office: 'Edinburgh',
      age: 61,
      startDate: '2011/04/25',
      salary: '$320,800',
      name: 'Sonya Frost',
      position: 'Software Engineer',
      office: 'Edinburgh',
      age: 23,
      startDate: '2008/12/13',
      salary: '$103,600',
      name: 'Jena Gaines',
      position: 'Office Manager',
      office: 'London',
      age: 30,
      startDate: '2008/12/19',
      salary: '$90,560',
      name: 'Quinn Flynn',
      position: 'Support Lead',
      office: 'Edinburgh',
      age: 22,
      startDate: '2013/03/03',
      salary: '$342,000',

frankvdsm priority commented 2 years ago

In fact I want to apply the look and feel which I created in the builder for datatables but can’t make it work. [striped]=“true” is working but [color]=“blue-grey” is not working.

Arkadiusz Idzikowski staff commented 2 years ago

@frankvdsm There is no [color] input in the Angular datatable. You can add our predefined background colors classes to the div with .datatable class (for example <div class="datatable bg-info">) to change the table background color or add a new custom class and create your custom background.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.2.0
  • Device: PC
  • Browser: Edge
  • OS: Windows
  • Provided sample code: No
  • Provided link: No