Import Angular Material components in an Ionic Project

Question

I'm trying to use Angular Material in an Ionic 4 Project. I have already installed all the dependencies needed through NPM. In order to get a more clean and maintainable code, I've created a separate ngModule which imports all the components that I need in my application,following the Angular Material Docs(the Getting Start part). Then, I've imported it in the page module where I want to use it. However, when I want to start the material component, It looks like the import is not being used, so I can't use the component.

I've tried to import the material components module directly in the app.module.ts file, with the same results.I could just import each component that I want to use directly,instead of the module with all of them, but I really want to know why this approach is not working, and if is there anything I'm not doing correctly.

So this is how my custom module looks:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule} from '@angular/material';
import {MatDialogModule} from '@angular/material/dialog';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatDialogModule
  ],
  exports: [
    MatDialogModule,
    MatButtonModule
  ]
})
export class AppMaterialModule { }

And this how I'm trying to import it where I want to use it:

import { AppMaterialModule} from '../../app-material.module';

@NgModule({
  declarations: [],
  imports: [
    AppMaterialModule,
    ....
  ]
 ...

I expect to be able to use all the material components imported in AppMaterialModule just including this module where I'm using then, but somehow this approach is not working.

Thanks for your help.

@Jota.Toledo If I try to use for example a paginator component: `'mat-paginator' is not a known element: 1. If 'mat-paginator' is an Angular component, then verify that it is part of this module. 2. If 'mat-paginator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.` — Raul Bulchandani, Apr 30 '19 at 10:25
for angular 9+ check this Answer: https://stackoverflow.com/questions/62295166/how-to-import-all-angular-material-modules-in-angular-9 — Mansour Alnasser, Dec 09 '20 at 09:47

score 0 · Answer 1 · answered Apr 30 '19 at 08:51

This is my setup which works for Ionic4.

Like you I have a custom module called MaterialModule. (Trim this down to the Modules you need).

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

import {
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatStepperModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule } from '@angular/material';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule],
  exports: [
    BrowserModule,
    BrowserAnimationsModule,

    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule],
})
export class MaterialModule {}

which I import in my app.module.ts file:

...
import { MaterialModule } from './material.module';
...


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    MaterialModule,
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I was using the same structure but it doesnt seem to work. However,If you are telling me that it's working for you in Ionic 4 there's definitely something I am missing. So i'll keep looking around it. Thanks for the response. — Raul Bulchandani, Apr 30 '19 at 10:34

score 0 · Answer 2 · edited Sep 04 '21 at 16:50

0

I had to import each module separately

// MatTableModule
import { MatTableModule } from '@angular/material/table';
// MatButtonModule
import { MatButtonModule } from '@angular/material/button';
...

edited Sep 04 '21 at 16:50

Todd

652
2
19
37

answered Sep 01 '21 at 17:57

O.Taaffe

11
1
3

Import Angular Material components in an Ionic Project

2 Answers2