如何在angular 6中使用tab？

<div>
  <ul class="tab-list">
    <li (click)="selectTab('tab1')" [class.active]="selectedTab === 'tab1'">Tab 1</li>
    <li (click)="selectTab('tab2')" [class.active]="selectedTab === 'tab2'">Tab 2</li>
    <li (click)="selectTab('tab3')" [class.active]="selectedTab === 'tab3'">Tab 3</li>
  </ul>
  <div class="tab-content">
    <div *ngIf="selectedTab === 'tab1'">Tab 1 Content</div>
    <div *ngIf="selectedTab === 'tab2'">Tab 2 Content</div>
    <div *ngIf="selectedTab === 'tab3'">Tab 3 Content</div>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab',
  templateUrl: './tab.component.html',
  styleUrls: ['./tab.component.css']
})
export class TabComponent {
  selectedTab: string = 'tab1';

  selectTab(tab: string) {
    this.selectedTab = tab;
  }
}

.tab-list {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.tab-list li {
  cursor: pointer;
  padding: 10px;
  background-color: #ccc;
}

.tab-list li.active {
  background-color: #f00;
}

.tab-content {
  margin-top: 10px;
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TabComponent } from './tab.component';

@NgModule({
  declarations: [TabComponent],
  imports: [CommonModule],
  exports: [TabComponent]
})
export class TabModule { }

<div>
  <h1>Tab Example</h1>
  <app-tab></app-tab>
</div>