I have created a new project, and I am trying to add angular-material
.
I have created material.module.ts
in my app
folder:
import { NgModule } from '@angular/core';
import {
MatButtonModule,
MatMenuModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule,
MatToolbarModule
} from '@angular/material';
@NgModule({
imports: [
MatButtonModule,
MatMenuModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule,
MatToolbarModule,
],
exports: [
MatButtonModule,
MatMenuModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule,
MatToolbarModule
]
})
export class MaterialModule { }
and I have imported it into one of my components:
import { MaterialModule } from '../material.module';
Furthermore, I have set up angular material in index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
in my style.css
@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';
I know that it is working cause I have shown a material-icon
as a test:
<i class="material-icons">face</i>
but when I try to create the footer it fails and it shows this message:
Uncaught Error: Template parse errors: 'mat-toolbar' is not a known element: 1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module. 2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
That's because you have to import a module to the module which contains the component declaration, not into the component itself:
app.module.ts
import { MaterialModule } from './material.module';
@NgModule({
imports: [
// ...
MaterialModule
],
declarations: [
MyCoolComponent,
// ...
]
})
P.S. The correct way to use a material icon is to use the MatIcon
component. Example usage:
<mat-icon>home</mat-icon>
Best way
for a quick good fix
import {MatToolbarModule} from '@angular/material/toolbar';
in your app.module.ts
then declare MatToolbarModule in your declarations[].
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With