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