I am using Angular material, to build table

Here is my ponent for table:

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import {MatTableDataSource, MatPaginator, MatDialog, MatDialogConfig} from '@angular/material';
import { PAYMENTS } from "./payments-mock";



@Component({
  selector: 'app-payments',
  templateUrl: './paymentsponent.html',
  styleUrls: ['./paymentsponent.scss']
})
export class PaymentsComponent implements AfterViewInit {


  //Default values to checkboxes
  pending = false;
  approved = false;
  rejected = false;

  //List of displaying columns
  displayedColumns = ['PaymentDate','Amount','StatusDescription','Reason','Action'];
  dataSource = new MatTableDataSource(PAYMENTS);


  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.filterPredicate =
     (data, filter: string) => !filter || data.StatusDescription === filter;
  }

  //Methods for checkboxes
  pendingModelChecked(value: any) {
    const filter = value ? 'Pending' : null
    this.dataSource.filter = filter;
  }

  approvedModelChecked(value: any) {
    const filter = value ? 'Approved' : null
    this.dataSource.filter = filter;
  }

  rejectedModelChecked(value: any) {
    const filter = value ? 'Rejected' : null
    this.dataSource.filter = filter;
  }
}

And here is my app.module.ts file

    import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './appponent';
import {CustomMaterialModule} from "./CustomMaterialModule";
import { PaymentsComponent } from './payments/paymentsponent';
import { MatPaginatorModule, MatCheckboxModule, MATERIAL_SANITY_CHECKS, MatDialogModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule} from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent,
    PaymentsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CustomMaterialModule,
    MatPaginatorModule,
    MatCheckboxModule,
    MatDialogModule,
    MatSelectModule,
    MatDatepickerModule,
    MatNativeDateModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
    {
      provide: MATERIAL_SANITY_CHECKS,
      useValue: false
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I include material theme like this @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in payments ponent SCSS file

But it seems that not all elements has styles. For example checkboxes.

When I click to it, it looks like they dont have indigo pink theme

But I don't have any errors in console.

Where can be my problem?

Thank's for help

I am using Angular material, to build table

Here is my ponent for table:

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import {MatTableDataSource, MatPaginator, MatDialog, MatDialogConfig} from '@angular/material';
import { PAYMENTS } from "./payments-mock";



@Component({
  selector: 'app-payments',
  templateUrl: './payments.ponent.html',
  styleUrls: ['./payments.ponent.scss']
})
export class PaymentsComponent implements AfterViewInit {


  //Default values to checkboxes
  pending = false;
  approved = false;
  rejected = false;

  //List of displaying columns
  displayedColumns = ['PaymentDate','Amount','StatusDescription','Reason','Action'];
  dataSource = new MatTableDataSource(PAYMENTS);


  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.filterPredicate =
     (data, filter: string) => !filter || data.StatusDescription === filter;
  }

  //Methods for checkboxes
  pendingModelChecked(value: any) {
    const filter = value ? 'Pending' : null
    this.dataSource.filter = filter;
  }

  approvedModelChecked(value: any) {
    const filter = value ? 'Approved' : null
    this.dataSource.filter = filter;
  }

  rejectedModelChecked(value: any) {
    const filter = value ? 'Rejected' : null
    this.dataSource.filter = filter;
  }
}

And here is my app.module.ts file

    import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.ponent';
import {CustomMaterialModule} from "./CustomMaterialModule";
import { PaymentsComponent } from './payments/payments.ponent';
import { MatPaginatorModule, MatCheckboxModule, MATERIAL_SANITY_CHECKS, MatDialogModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule} from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent,
    PaymentsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CustomMaterialModule,
    MatPaginatorModule,
    MatCheckboxModule,
    MatDialogModule,
    MatSelectModule,
    MatDatepickerModule,
    MatNativeDateModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
    {
      provide: MATERIAL_SANITY_CHECKS,
      useValue: false
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I include material theme like this @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in payments ponent SCSS file

But it seems that not all elements has styles. For example checkboxes.

When I click to it, it looks like they dont have indigo pink theme

But I don't have any errors in console.

Where can be my problem?

Thank's for help

• javascript
• angular
• typescript
• sass
• angular-material

• You may have omitted several steps in Material's installation and setup. Please include a minimal reproducible example on stackblitz. reproducing your issue. – user4676340 Commented Dec 10, 2018 at 8:52
• have you clicked the checkbox. because tbh they look pretty much like the material checkboxes. material checkbox – Nikolai Kiefer Commented Dec 10, 2018 at 8:53
• I think I include all info. Which ine is missing? @trichetriche – Eugene Sukh Commented Dec 10, 2018 at 8:53
• I updated my question @NikolaiKiefer – Eugene Sukh Commented Dec 10, 2018 at 8:55
• you should import it in your global styles.scss not scss of ponent. – Lia Commented Dec 10, 2018 at 8:57

1 Answer 1

You need to put this line @import "~@angular/material/prebuilt-themes/indigo-pink.css in your general style.scss style sheet, not the ponent's one