Bahan Sudut 7 - Lencana

Itu <mat-badge>, Angular Directive, digunakan untuk membuat lencana yang merupakan keterangan status kecil untuk elemen UI. Lencana biasanya membawa sejumlah atau sekumpulan karakter pendek lainnya, yang muncul di dekat elemen UI lainnya.

Dalam bab ini, kami akan menampilkan konfigurasi yang diperlukan untuk menggambar kontrol lencana menggunakan Material Angular.

Buat Aplikasi Angular

Ikuti langkah-langkah berikut untuk memperbarui aplikasi Angular yang kami buat di Angular 6 - bab Pengaturan Proyek -

Langkah	Deskripsi
1	Buat proyek dengan nama materialApp seperti yang dijelaskan di Angular 6 - bab Pengaturan Proyek .
2	Ubah app.module.ts , app.component.ts , app.component.css dan app.component.html seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3	Kompilasi dan jalankan aplikasi untuk memverifikasi hasil dari logika yang diimplementasikan.

Berikut adalah isi dari deskriptor modul yang dimodifikasi app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatBadgeModule, MatButtonModule, MatIconModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatBadgeModule, MatButtonModule, MatIconModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Berikut adalah konten dari file host HTML yang dimodifikasi app.component.html.

<p><span matBadge = "4" matBadgeOverlap = "false">Mail</span></p>
<p>
   <button mat-raised-button color = "primary"
      matBadge = "8" matBadgePosition = "before" matBadgeColor = "accent">
      Action
   </button>
</p>
<p><mat-icon matBadge = "15" matBadgeColor = "warn">home</mat-icon></p>

Hasil

Verifikasi hasilnya.

Detail

• Pertama-tama, kami telah membuat span, tombol, dan ikon.
• Kemudian, kami telah menambahkan lencana ke setiap elemen menggunakan atribut mat-badge.