09. Angular 템플릿 문법

in Angular

Interpolation

이중 중괄호 {{ }} 사이에 수식을 표현하고, 계산한 다음 그 결과를 화면에 표시

Safe Navigation Operator

존재하지 않는 객체의 변수를 Interpolation할 때, 앱전체가 중지됌. 예를들어 {{ Animal.Cat }}이 없는데, 템플릿에서 사용한다면 앱 전체가 중지된다. 이를 방지하기위해 {{ Animal?.Cat }} 을 사용한다면, Animal이 존재할때만 Cat에 접근하게 돼어 오류가 발생하지 않는다.

[]기호의 의미 : Property Binding

custom property 로 클래스와 연결시킬 수 있음.

1
2
3
4
5
6
7
8
9
10
11
@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <counter [init]="initialCount"></counter>
    </div>
  `
})
export class AppComponent {
  initialCount: number = 10;
}

클래스에서 속성을 변경할 경우, 템플릿에도 반영됌.

()기호의 의미 : Template Statement

이벤트를 바인딩하기 위해 사용.

  1. (click) 이벤트
1
2
3
4
5
6
7
8
9
10
11
12
import { Component } from '@angular/core';

@Component({
  templateUrl: '<button ion-button (click)="onClick()>버튼</button>'
})
export class TabsPage {
  constructor() {
  }
  onClick() {
    alert('dd');
  }
}
  1. (mouseover) 이벤트
  2. @Output() outputProperty = new EventEmitter();`

<child (outputProperty)="outputEvent($event)"></child>

@Output()장식자로 선언한 변수와 동일한 속성명.

<child-cmp #child1 [childname]="'자식1'"></child-cmp>

# 기호의 의미

참조변수의 의미이다. 참조변수가 #child1이라고 선언돼 있을때 childname을 참조하려면 {{ child1.childname }} 과 같이 접근한다.

ts파일에서 참조 변수에 접근하기 위해서는 ViewChild를 이용한다.

1
2
3
4
5
6
7
8
9
import {ViewChild, ElementRef} from '@angular/core';
...
export class SchedulePage implements OnInit {
    @ViewChild('scheduleContents') scheduleContents: ElementRef;
  	constructor() {
      // 다음과 같이 element에 접근.
      this.scheduleContents.nativeElement.innerHTML = '후후');
  	}
 }

*ngFor, *ngIf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
...
@Component({
  templateUrl: `
    <div *ngFor="let person of persons; let i = index">
		{{ i + 1 }} 번째 사람
		{{ person.name }}
		{{ person.old }}
	</div>
    <div *ngFor="let command of myAliens; let i = index">
		{{ i + 1 }} 번째 에일리언 목표
		{{ aliens[command]['name'] }}
		{{ aliens[command]['old'] }}
	</div>
`
})
export class Persons {
  persons = [
    { name: '남준호', old: 28 },
    { name: '남정연', old: 22 }
  ];
  aliens = {
    kill : { name: '뛸릴릴리', old: 12942 },
    him : { name: '뀔릴뗋슭', old: 12942 }
  };

  get myAliens() {
    return Object.keys(this.aliens);
  }
}

ngFor은 iterable한 변수에서만 사용가능, 배열에서 사용가능

객체에서 사용하기 위해서는 get 함수 만들어 주기.

Reference

https://toddmotto.com/passing-data-angular-2-components-input

https://www.youtube.com/watch?v=Llt_jms4liU&index=16&list=PLAiXlfcSCXYTA8k8AQX0sdRtvpOGkY7yq

Comment and share

Author's picture

Junho Nam

enjoy while living


full stack web developer


Seoul, Korea