19년도 여름방학 모각코 1일차 회고 0627

Angular 튜토리얼 따라하기.

angular 튜토리얼 https://angular.io/start

Angular

1. 리스트 추가 화면

*ngFor 명령어는 angular에서 controller에서 products리스트에서 값을 바인딩 해서

foreach구문처럼 반복을 하겠다 라는 의미이다.

가 반복됨.

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

결과 화면

결과 코드

<div _ngcontent-xfc-c17=""><h3 _ngcontent-xfc-c17=""> Phone XL </h3></div>
<div _ngcontent-xfc-c17=""><h3 _ngcontent-xfc-c17=""> Phone Mini </h3></div>
<div _ngcontent-xfc-c17=""><h3 _ngcontent-xfc-c17=""> Phone Standard </h3></div>

2.title 지정

[title] angular에서 값 바인딩이 필요하면 angular에서 만들어둔 [title]로 써야 한다.

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

결과 화면

3. 조건문

*ngIf는 product객체의 description 변수에 값이 있을 때 p태그가 생긴다.

<div *ngFor="let product of products">
  <p *ngIf="product.description">
</div>

결과 화면

4. 버튼 onclick

angular에서 onclick은 (click)으로 바인딩한다.

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

결과 화면

summary

*ngFor	해당 명령어가 든 태그가 반복함. foreach문으로 씀.
*ngIf	조건이 맞으면 해당 명령어가 든 태그가 작성됨.
Interpolation {{ }}	값 바인딩
Property binding [ ]	프로퍼티 바인딩
Event binding ( )	이벤트 바인딩