1

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>

0

2 respuestas 2

0

De esta forma acepta a Angular material tanto desde un componente tool que se encuentra declarado en el modulo app.module como de otro header de caracteristica Lazy-loading en el modulo que contiene a este ultimo es necesario importar a MaterialModule en el caso del componente tool es por supuesto necesario declararlo en app.module agregar material con ng add @angular/material generar modulo material con ng g m material -m app.module al crear un nuevo componente siempre ver que esta declarado en un modulo si cargamos un componente en forma Lazy loading si se requiere importar MaterialModule a su modulo

// material.module.ts


    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { MatToolbarModule } from '@angular/material/toolbar';
    import { MatCardModule } from '@angular/material/card';
    import { MatButtonModule } from '@angular/material/button';
    import { MatIconModule } from '@angular/material/icon';


    @NgModule({
      declarations: [],
      imports: [
        CommonModule,
        MatToolbarModule , MatCardModule , MatButtonModule,
        MatIconModule
      ],
      exports: [MatToolbarModule , MatCardModule , MatButtonModule,
     MatIconModule ]
    })
    export class MaterialModule { }




//app.module.ts


    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { ProductsComponent } from './products/products/products.component';

    import { MaterialModule } from './material/material.module';
    import { FormsModule } from '@angular/forms';
    import { HttpClientModule } from '@angular/common/http';
    import { ToolComponent } from './tool/tool.component';


    @NgModule({
      declarations: [
        AppComponent,
        ProductsComponent,
        ToolComponent 
        
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpClientModule,
        MaterialModule,

      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }









//app.component.html
    <router-outlet></router-outlet>


//-routing.module.ts



    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';

    import { ProductsComponent } from './products/products/products.component';

    const routes: Routes = [
    {path: '',
      component: ProductsComponent
    },


      { path: 'header', loadChildren: () => import('./header/header.module').then(m => m.HeaderModule) }

    ];

    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }



// products.component.html



    <app-tool></app-tool>
    <p>products works!</p>
    <section class= 'products'>
      <mat-card class='card' *ngFor= 'let product of products'>
          <mat-card-header> {{product.description}} </mat-card-header>
          <mat-card-content> {{product.manteca}} </mat-card-content>
          <mat-card-actions>
              <button mat-flat-button color="primary">Buy</button>
          </mat-card-actions>
      </mat-card>
    </section>
<a routerLink="header"> Go modulo Header a toolbar 🏠</a>

// header.module.ts


    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';

    import { HeaderRoutingModule } from './header-routing.module';
    import { HeaderComponent } from './header.component';
    import { MaterialModule } from '../material/material.module';


    @NgModule({
      declarations: [
        HeaderComponent
      ],
      imports: [
        CommonModule,
        MaterialModule,
        HeaderRoutingModule
      ]
    })
    export class HeaderModule { }




// header.component.ts





    <p>header works!</p>
    <mat-toolbar>
      <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
        <mat-icon>menu</mat-icon>
      </button>
      <span>My App</span>
      <span class="example-spacer"></span>
      <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
        <mat-icon>favorite</mat-icon>
      </button>
      <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
        <mat-icon>share</mat-icon>
      </button>
    </mat-toolbar>



// header-routing.module.ts





    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { HeaderComponent } from './header.component';

    const routes: Routes = [{ path: '', component: HeaderComponent }];

    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
     export class HeaderRoutingModule { }

0

Debes agregar dentro de tu hoja de estilos globales "style.css" la variable del tema que elegiste.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.