[Angular] HTML 데이터 바인딩, 데이터 포맷

Q. HTML에서 동적으로 변수를 사용하게 해주세요.

프론트엔드 개발을 하다보면 화면단에서 동적으로 정보를 뿌려줄때가 많다. 앵귤러에서는 HTML에서 중괄호 안에 변수이름을 넣어주면 HTML에서 변수를 사용할수있다. 빠르게 사용법을 알아보자.

 

<!--HTML-->
<span> {{userName}} 님 반갑습니다. </span>

사이트의 헤더부분에 "유저이름" 님 반갑습니다 라는 것처럼 "유저이름"이라는 부분이 항상 바뀌는데 이런 경우처럼 데이터가 동적으로 변하는 부분에 사용해주면 된다. 삼항연산자 또한 가능하다.

 

<!--HTML-->

<div>{{isLogin ? '로그인된 유저입니다.' : '로그인이 필요합니다.'}}<div>

isLogin이란 변수가 true일때 "로그인된 유저입니다"를 출력하고 false이면 "로그인이 필요합니다" 라는 문구를 출력하는 예제이다.

 

데이터 바인딩을 하다보면 3,000이나 2022-03-29와 같이 데이터 포맷을 정해주어야 줄 때도 빈번하게 있는데 이때 사용하는 것이 앵귤러의 pipe이다.

 

<span>{{ today | date: "yyyy-MM-dd"}}</span>

today라는 날짜를 가지고있는 변수에게 yyyy-MM-dd 형식을 정해주는 포맷이다. date 파이프를 사용하면된다. yyyy-MM-dd 말고도 hh:mm과 같이 시간 포맷도 date파이프를 사용해서 정해 줄 수 있다.

 

<span>{{money | number: '1.0-0'}} </span>

숫자또한 1,000과같이 number 파이프를 사용하면 1,000자리마다 컴마를 찍어줄수있다.

. 뒤에오는 것은 소수점 자릿수이다. (0-2이면 소수점 둘째자리까지)

 

이런식으로 데이터바인딩을 해볼수있다.