Estoy aprendiendo a usar Angular con Angular Material, pero tengo un problema, hize una Toolbar en un componente nuevo, éste funciona, pero en otro componente no los toma, hay botones sin estílo de Material, por alguna razón.
en material.module.ts tengo lo siguiente
import { MatToolbarModule } from '@angular/material/toolbar';
import { NgModule } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [MatToolbarModule , MatCardModule , MatButtonModule , MatIconModule ],
exports: [MatToolbarModule , MatCardModule , MatButtonModule , MatIconModule ]
})
export class MaterialModule {}
en mi app.module.ts lo siguiente
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/components/header/header.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule} from './material.module';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
],
exports: [MaterialModule],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
MaterialModule,
BrowserAnimationsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
y en el products.component.html lo siguiente
<section class= 'products'>
<mat-card class='card' *ngFor= 'let product of products'>
<mat-card-header> {{product.name}} </mat-card-header>
<mat-card-content> {{product.description}} </mat-card-content>
<mat-card-actions>
<button mat-flat-button color="primary">Buy</button>
</mat-card-actions>
</mat-card>
</section>