Skip to main content
explicacion
Origen Enlace
nestdan
  • 1.3k
  • 1
  • 8
  • 14

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

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

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

Origen Enlace
nestdan
  • 1.3k
  • 1
  • 8
  • 14

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

// 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 { }