Menggunakan Angular Material Tabs

by

Pada modul ini kita akan menggunakan Angular Material Component Tabs. Dokumentasi lengkap dapat dilihat di https://material.angular.io/components/tabs/overview

Buka file main-content.component.html, tambahkan component tabs untuk menampilkan data bio dan notes.

<div *ngIf="!user">
    <mat-spinner></mat-spinner>
</div>
<div *ngIf="user">
    <mat-card>
        <mat-card-header>
            <mat-icon mat-card-avatar svgIcon="{{user.avatar}}"></mat-icon>
            <mat-card-title>{{ user.name }}</mat-card-title>
            <mat-card-subtitle>Birthday {{ user.birthDate | date:'d LLLL' }}</mat-card-subtitle>
          </mat-card-header>
          <mat-card-content>
            <mat-tab-group>
              <mat-tab label="Bio"> <p>{{ user.bio }}</p> </mat-tab>
              <mat-tab label="Notes"> Notes goes here </mat-tab>
            </mat-tab-group>            
            
          </mat-card-content>        
    </mat-card>
</div>

Sesuai ekspektasi, data bio dan notes ditampilkan dalam bentuk tabs.

Sampai disini tampilan dasar aplikasi sudah terbentuk. Pada modul berikutnya kita akan menampilkan data notes dalam bentuk table.

Sharing is caring:

Leave a Comment