Angular - material 사용법

안녕하세요!

 

오늘은 Angular의 material 사용법에 대해 알아보겠습니다.

 

material은 부트스트랩과 비슷하다고 볼 수있는데요.

 

부트스트랩과 사용 방법은 상당히 많이 다르지만, angular를 사용해 보신 분이라면 충분히 쉽게 사용 할 수 있습니다.

 

 

https://material.angular.io/

사용법은 기본적으로 공식 사이트에서 많은 예제와 사용법을 설명해 주고 있습니다.

 

오늘은 이 예제들을 바탕으로 사용법에 대해 알아보도록 하겠습니다!

 

 

---

 

1. 프로젝트 생성

다들 아시겠지만, 프로젝트를 먼저 생성해줍니다.

ng new material-Tutorial

ng new 프로젝트명

 

2.  material 설치

생성한 프로젝트 경로로 이동 후 cli를 입력합니다.

ng add @angular/material

 

 

3. Module 추가

app.Module에 모듈을 사용하려는 모듈을 import 시켜줘야 합니다

저는 버튼 모듈을 사용해 보겠습니다.

공식 홈페이지에서는 이것을 import하라고 나와있네요.

사진과 같이 추가해줍니다.

 

 

5. html 작성

 

 

6. 빌드 

ng serve

빌드를 하고 localhost:4200으로 접속합니다.

 

하지만 에러가 발생합니다!

mat-icon을 알 수가 없다고 하네요.

 

app.module에  icon모듈이 있다고 알려줍니다.

 

 

이제 잘 나옵니다 ㅎㅎ 이런식으로 사용하시면 됩니다.

 

예제가 친절하게 설명이 잘 되있어서 공식사이트 보시면 더 쉽게 따라 할 수 있습니다 ㅎㅎ