Angular #자주 쓰이는 다섯 syntax

Angular's template 자주 쓰이는 다섯 syntax

---

반복문 *ngFor

: 컬렉션의 각 항목에 대한 템플릿을 렌더링하는 구조적 지시문입니다. 지시문은 요소에 배치되며 복제 된 템플릿의 부모가됩니다.

 

ex)

<div *ngFor="let product of products">{{ product.name }}</div>

: products의 갯수만큼 반복 출력

---

조건문 *ngIf

: 부울로 강제 된 표현식의 값을 기반으로 템플릿을 조건부로 포함하는 구조적 지시문입니다. 식이 true로 평가되면 Angular는 then 절에 제공된 템플릿을 렌더링하고, false 또는 null 인 경우 선택적 else 절에 제공된 템플릿을 렌더링합니다. else 절의 기본 템플릿은 비어 있습니다.

 

ex1) condition 이 true면 객체 출력, false면 미출력

<p *ngIf="condition">

    Description: {{ product.description }}

</p>

 

ex1) condition 이 true면 객체 출력, false면 미출력

<p *ngIf="condition">

    Description: {{ product.description }}

</p>

 

ex2) condition 이 true면 <ng-template #thenBlock>출력, false면 <ng-template #elseBlock>출력

<div *ngIf="condition; then thenBlock else elseBlock"></div>

<ng-template #thenBlock>Content to render when condition is true.</ng-template>

<ng-template #elseBlock>Content to render when condition is false.</ng-template>

 

---

보간 구문 Interpolation {{ }}

: 보간은 속성 값을 텍스트로 렌더링합니다.

 

ex) product의 description 속성 출력

{{ product.description }}

---

Property binding [ ]

: 객체 위에 마우스를 놓으면 바인딩 된 이름 속성 값을 사용할 수 있습니다.

 

ex) a 태그에 title 속성 부여

<a [title]="product.name + ' details'">

    {{ product.name }}

</a>

---

Event binding ( )

: 이벤트를 바인딩합니다.

 

ex) button click 이벤트에 share() 함수 바인딩

<button (click)="share()">

   Share

</button>

---