如何在ionic angular中实现此工具栏？

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>工具栏</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="openSettings()">
        <ion-icon name="settings"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 页面内容 -->
</ion-content>

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

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.page.html',
  styleUrls: ['./toolbar.page.scss'],
})
export class ToolbarPage {

  constructor(private navCtrl: NavController) { }

  openSettings() {
    // 打开设置页面
    this.navCtrl.navigateForward('/settings');
  }

}