*ngFor, *ngIf

*ngFor

여러개의 div 를 만들어야 하는데, 일일히 div 를 수작업으로 계속 만드는 것은 리소스가 떨어지는 상황이다.
이러한 경우, *ngFor 을 이용하면 여러개의 요소를 쉽게 만들 수 가 있다.

예제

아래와 같이 mat-select 라는 material 컴포넌트를 하나 만드는데 그 안에 option 값을 그 때 그 때 다르게 넣고 싶은 경우가 있다.

interface itemInfo {
  value: number;
  valueString: string;
}

export class ItemComponent {
    items: itemInfo[] = [
    {value: 0, valueString: 'item: 0'},
    {value: 1, valueString: 'item: 1'},
    {value: 2, valueString: 'item: 2'},
    {value: 3, valueString: 'item: 3'},
    {value: 4, valueString: 'item: 4'},
    {value: 5, valueString: 'item: 5'},
    {value: 6, valueString: 'item: 6'}
  ];
}

 <mat-select>
   <mat-option *ngFor="let item of items" [value]="item.value">
     {{ item.valueString }}
   </mat-option>
 </mat-select>

이런 식으로 class 에서 배열 안에 오브젝트를 담아 그 만큼 루프를 돌리며, 돔을 만드는 방법이 있습니다. 이를 이용하면, 불필요한 리소스를 줄일 수 있습니다.

*ngIf

말그대로 조건문을 사용하여 Dom 에 그릴지 말지를 정하는 기능으로써 조건을 직접 만들어서 사용할 수 있습니다.

예제

사용법은 간단합니다. 요소에 *ngIf 를 사용하면 끝입니다.

<span class="foot_list" *ngIf="false">
  <a href="/" target="_blank">Target</a>
</span>

조건을 사용하여 화면에 보일지 말지 정할 수 있습니다.