Angular Material 설치 및 간단한 예시

개요

Angular Material이란, 2014년 구글에서 제시한 디자인 가이드라인인 머터리얼 디자인(Material Design)을 Angular 애플리케이션에서 쉽게 사용할 수 있도록 구현한 모듈입니다. 구글에서 직접적으로 관리하는 모듈인 만큼, 다양한 예제와 문서화가 잘되어 있어 초보자가 사용하기 좋습니다.

(저와 같은 웹개발 비경험자의 입장에서는 간단히 적용하여 그럴듯한 모양새의 애플리케이션을 완성할 수 있게 해주는 고마운 스킨(?)입니다.)

이번 포스트에서는 이 Angular Material을 새로운 Angular Project에 적용해보도록 하겠습니다.

모든 내용은 Angular Material의 공식 가이드인 Getting stared 문서를 참고하였습니다.

본 포스트의 내용에 따라 Angular Material을 프로젝트에 적용 시 애플리케이션은 아래와 같은 모양을 갖게 됩니다.

Angular Material and Angular CDK 설치

Angular CLI를 사용하여 Angular Project를 생성합니다. 해당 프로젝트의 폴더에서 작업을 합니다.

아래의 명령을 사용하여 angular material과 Angular CDK, 그리고 Angular Animation패키지를 설치합니다.

$ npm install --save @angular/material @angular/cdk @angular/animations

애니메이션 설정하기

Angular Material의 몇몇 컴포넌트(Component)들은 애니메이션 효과를 사용합니다. 이러한 컴포넌트들이 올바르게 동작할 수 있도록 하기 위해서 animation package 가 설치된 후, 이를 애플리케이션에서 사용할 수 있도록 설정할 필요가 있습니다.

▼ src/app/app.module.ts

import  { NgModule }  from  '@angular/core';
import  { BrowserModule }  from  '@angular/platform-browser';
import  { FormsModule }  from  '@angular/forms';
import  { BrowserAnimationsModule }  from  '@angular/platform-browser/animations';    // ← 추가함

import  { AppComponent }  from  './app.component';
import  { HelloComponent }  from  './hello.component';

@NgModule({

imports:  [ BrowserModule, 
            FormsModule, 
            BrowserAnimationsModule // ← 추가함
          ],
declarations:  [ AppComponent, HelloComponent ],
bootstrap:  [ AppComponent ]

})

export  class AppModule {  }

사용할 컴포넌트 모듈 Import 하기

마찬가지로 사용할 컴포넌트 모듈들을 등록합니다. Angular Material 은 다양한 컴포넌트를 지원하며, 이를 사용하기 위해서는 이를 모듈에 일일이 등록해줄 필요가 있습니다.

예시로 Button컴포넌트의 사용이 필요할 경우 아래와 같이 수정합니다.

▼ src/app/app.module.ts

import  { NgModule }  from  '@angular/core';
import  { BrowserModule }  from  '@angular/platform-browser';
import  { FormsModule }  from  '@angular/forms';
import  { BrowserAnimationsModule }  from  '@angular/platform-browser/animations';
import  { MatButtonModule} from '@angular/material';    // ← 추가함

import  { AppComponent }  from  './app.component';
import  { HelloComponent }  from  './hello.component';

@NgModule({

imports:  [ BrowserModule, 
            FormsModule, 
            BrowserAnimationsModule,
            MatButtonModule // ← 추가함
          ],
declarations:  [ AppComponent, HelloComponent ],
bootstrap:  [ AppComponent ]

})

여기서 주의할 것은 import 시 Angular의 BroserModule 뒤에 추가해야 한다는 것입니다.

테마 설정

Angular 애플리케이션에서 일관된 색상 및 모양을 적용하기 위해서 테마를 포함시킬 수 있습니다. 패키지 내에서 미리 작성되어 있는 테마를 사용하는 것이 조금 더 쉬운 방법으로 다음과 같이 간단히 추가할 수 있습니다.

▼ styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

다음의 가이드는 사전에 정의되어 있는 추가 테마 및 자신만의 테마를 수정하여 적용하는 방법에 대해 상세하게 다루고 있습니다.

제스처 지원

역시 몇몇 모듈 (mat-slide-toggle, mat-slider, matTooltip) 은 HammerJS라는 라이브러리에 의존하여 사용자의 제스처에 반응합니다. 이를 위하여 아래와 같이 HammerJS 라이브러리를 Angular 프로젝트에 추가하도록 합니다.

$ npm install --save hammerjs

설치 후, 이를 import 하도록 합니다.

▼ src/main.ts

import  './polyfills';

import  { enableProdMode }  from  '@angular/core';
import  { platformBrowserDynamic }  from  '@angular/platform-browser-dynamic';
import  'hammerjs';        // ← 추가함

import  { AppModule }  from  './app/app.module';


platformBrowserDynamic().bootstrapModule(AppModule).then(ref =>  {
  // Ensure Angular destroys itself on hot reloads.
  if  (window['ngRef'])  {
    window['ngRef'].destroy();
  }
  window['ngRef']  = ref;

  // Otherwise, log the boot error
}).catch(err => console.error(err));

아이콘 추가

만약 mat-icon 컴포넌트를 공식 머터리얼 디자인 아이콘과 함께 사용하고자 한다면 아이콘 폰트를 index.html 파일에서 불러오도록 설정해주어야 합니다.

다음과 같이 index.html의 상단에 추가합니다.

▼ src/index.html

<link  href="https://fonts.googleapis.com/icon?family=Material+Icons"  rel="stylesheet">  <!-- 추가 -->

<my-app>loading</my-app>

어떠한 아이콘을 지원하는지 확인하려면 다음의 링크를 통해서 살펴볼 수 있습니다.

결론

지금까지 살펴본 Angular Material의 적용 결과 및 전체 소스코드는 아래에서 확인해 보실 수 있습니다.