CODEWITHSUNDEEP
angular
Aymane EL Jahrani
Aymane EL Jahrani

Reputation: 192

Importing anuglar-material module on single component

EDIT: Fixed by using @angular/material instead of angular-material. Follow answers below if you are new to angular :)

I'm trying to import "MatToolbarModule" into a single navbar component to use it in navbar.component.html in an angular project but this doesn't seem to be working. Importing the module in "app.module.ts" and using it in index.html works fine.

Here is my navbar.component.ts :

import {NgModule} from '@angular/core';
import {MatToolbarModule} from 'angular-material';

@NgModule({
imports: [MatToolbarModule]
})
//Component decorator and rest of code is untouched

In my navbar.component.html:

<mat-toolbar>MyTitle</mat-toolbar>

Error i get : "If 'mat-toolbar' is an Angular component, then verify that it is part of this module."

I'm using angular 5 and latest version of angular-material and its dependecies. Thank you !

Upvotes: 1

Views: 5219

Answers (2)

Daniel Netzer
Daniel Netzer

Reputation: 2232

you have to export everything that you import in the module, its a feature module.

// moved this to independent file keeping the app.module cleaner
import { NgModule } from '@angular/core';
import {
    MatCheckboxModule,
    MatInputModule,
    MatSelectModule,
    MatRadioModule,
    MatMenuModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatTabsModule,
    MatButtonModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatSlideToggleModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatAutocompleteModule,
    MatExpansionModule
} from '@angular/material';

const materialModules = [
    MatCheckboxModule,
    MatInputModule,
    MatSelectModule,
    MatRadioModule,
    MatMenuModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatTabsModule,
    MatButtonModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatSlideToggleModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatAutocompleteModule,
    MatExpansionModule
];

@NgModule({
    declarations: [
    ],
    imports: materialModules,
    exports: materialModules
})
export class MaterialModule { }

Upvotes: 3

Kraken
Kraken

Reputation: 1955

Okay, answering your question, I recreated your case and all works fine for me. So I'll provide steps, maybe you missed something.

  1. Created Module ;

  2. Imported materialModule to it, added to imports;

  3. Imported needed component to it, add it do declarations;

  4. Imported all module to app.module and added to imports after BrowserAnimationsModule,BrowserModule.

  5. Created some mat component in my html and all worked for me.

Upvotes: 0

Related Questions