[Example] Component creation

Add Angular Material components

In src/app/shared/shared.module.ts, add :

import { MatTabsModule } from '@angular/material';
@NgModule({
  ...
  imports: [MatTabsModule],
  exports: [MatTabsModule],
  ...
})
export class SharedModule { }

Create component

In src/app, ng g component home

In src/app/home/home.component.html, replace all with :

<section fxLayout="column" fxFlexAlign="stretch">
  <div fxFlexAlign="center">
    <p class="mat-display-2">Welcome to this Angular blog application</p>
  </div>
  <p class="mat-h3">This application allows you to post articles, comments and share publications you like.</p>
  <mat-tab-group>
    <mat-tab label="Blog article">
      <p>Blog article creation</p>
    </mat-tab>
    <mat-tab label="Comments">
      <p>Comment posting, reply ...</p>
    </mat-tab>
    <mat-tab label="Like and share">
      <p>Liking and sharing posts and comments</p>
    </mat-tab>
  </mat-tab-group>
</section>

In src/app/home/home.component.scss, add :

section div p{
  color: #3f51b5;
  margin: 50px 0;
}
section div + p{
  padding-bottom: 20px;
}
mat-tab-group {
  text-align: center;
}
mat-tab-group p {
  padding-top: 20px;
}