[Angular] Angular Material Badge를 이용한 알림 뱃지 만들기

이번 포스팅에서는 Angular Material Badge를 이용해서 알림 개수를 표시하는 뱃지를 만들어보겠습니다.

Angular Material

먼저 아이콘을 보여주기 위한 MatIconModule과 뱃지를 표시해줄 MatBadgeModule 모듈을 추가해줍니다.

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatIconModule} from '@angular/material/icon';
import {MatBadgeModule} from '@angular/material/badge';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

먼저 컴포넌트 템플릿에 MatIcon을 이용해서 알림 아이콘을 추가해주겠습니다. (Material Icon에서 Material Icon 목록을 확인할 수 있습니다.)

Material Icons

<mat-icon>notifications</mat-icon>

그러면 아래와 같이 보여지는 것을 볼수 있습니다.

그리고 아이콘에 MatBadge를 추가해주도록 하겠습니다.

<mat-icon
  matBadge="10"
>
  notifications
</mat-icon>

그러면 아래와 같이 보여지는 것을 볼수 있습니다.

그런데 아이콘이 검정색에 뱃지가 인디고(테마가 Indigo/Pink로 설정된 경우) 색상이라 눈이 확실히 안 들어옵니다. 이 색상을 눈에 좀더 잘띄는 색상으로 변경을 해보겠습니다. 색상 값은 Material Theme의 값으로 primary, accent, warn이 있습니다.

<mat-icon
  matBadge="10"
  matBadgeColor="accent"	<!-- 기본 색상은 primary -->
>
  notifications
</mat-icon>

그러면 아래와 같이 핑크색으로 표시되는 것을 볼수 있습니다.

이번에는 뱃지의 위치를 변경해보겠습니다. 위치는 좌상단, 우상단, 좌하단, 우하단에 표시할수 있습니다(기본 위치는 우상단입니다).

<!-- 우상단 -->
<mat-icon
  matBadge="10"
  matBadgeColor="accent"
  matBadgePosition="above after"
>
  notifications
</mat-icon>

<!-- 좌상단 -->
<mat-icon
  matBadge="10"
  matBadgeColor="accent"
  matBadgePosition="above before"
>
  notifications
</mat-icon>

<!-- 좌하단 -->
<mat-icon
  matBadge="10"
  matBadgeColor="accent"
  matBadgePosition="below before"
>
  notifications
</mat-icon>

<!-- 우하단 -->
<mat-icon
  matBadge="10"
  matBadgeColor="accent"
  matBadgePosition="below after"
>
  notifications
</mat-icon>

그리고 이번에는 뱃지의 크기를 변경해보도록하겠습니다. 크기는 small, medium, large가 있습니다(기본 크기는 medium입니다).

<!-- small -->
<mat-icon
  matBadge="10"
  matBadgeColor="accent"
  matBadgeSize="small"
>
  notifications
</mat-icon>

<!-- medium -->
<mat-icon
  matBadge="10"
  matBadgeColor="accent"
  matBadgeSize="medium"
>
  notifications
</mat-icon>

<!-- large -->
<mat-icon
  matBadge="10"
  matBadgeColor="accent"
  matBadgeSize="large"
>
  notifications
</mat-icon>

여기까지 부족한 글 읽어주셔서 감사합니다.💛