ng g component home --spec false
home.component.html file:
<section fxLayout="column wrap">
<div fxFlexAlign="center">
<p>Welcome to the Material Angular OwnerAccount Application</p>
</div>
<p>In this application we are going to work with:</p>
</section>
app.component.html file:
<app-layout>
<app-home></app-home>
</app-layout>
=========================
home.component.css file as well:
section div p{
color: #3f51b5;
font-size: 30px;
text-shadow: 2px 3px 5px grey;
margin: 30px 0;
}
section div + p{
color: #3f51b5;
font-weight: bold;
font-size: 20px;
padding-bottom: 20px;
}
To use our first material component, the mat-tab component, we need to register it inside the material.module.ts file:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatTabsModule } from '@angular/material';
@NgModule({
imports: [
CommonModule,
MatTabsModule
],
exports: [
MatTabsModule
],
declarations: []
})
export class MaterialModule { }
home.component.html file:
<section fxLayout="column wrap">
<div fxFlexAlign="center">
<p>Welcome to the Material Angular OwnerAccount Application</p>
</div>
<p>In this application we are going to work with:</p>
<mat-tab-group>
<mat-tab label="Material Components">
<p>We are going to use different material components to create nice looking angular app.</p>
</mat-tab>
<mat-tab label="Consume .NET Core Web API">
<p>We will consume our .NET Core application. Basically, we will create complete CRUD client app.</p>
</mat-tab>
<mat-tab label="Fully responsive navigation menu">
<p>By using material components, we are going to create fully responsive navigation menu, with its side-bar as well.</p>
</mat-tab>
</mat-tab-group>
</section>
