3

I am using Angular material, to build table

Here is my component 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.component.html',
  styleUrls: ['./payments.component.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.component';
import {CustomMaterialModule} from "./CustomMaterialModule";
import { PaymentsComponent } from './payments/payments.component';
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 component SCSS file

But it seems that not all elements has styles. For example checkboxes. enter image description here

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

enter image description here

But I don't have any errors in console.

Where can be my problem?

Thank's for help

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

1 Answer 1

9

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

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

1 Comment

Yup. Thanks . That's it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.