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>