앵귤러 템플릿 - interpolation

imterpolation은 TypeScript에서 동적가치를 템플릿을 가져오거나 템플릿에서 생성하여 표시하게 해 주는 기능입니다.

 

사용방법

1. interpolation

구현하는 방법은 아래와 같이 이중 중괄호 ( {{ }} ) 안에 표시하고자 하는 값의 이름을 넣어 주면 됩니다. 변수명을 사용할 때 주의할 점은 .ts 클래스에 반드시 해당 변수명이 존재해야 한다는 것입니다.

<!-- interpolation.component.html -->

<p>
  {{ interpolation }}
</p>

 

// interpolation.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'interpolation-root',
  templateUrl: './interpolation.component.html',
  styleUrls: ['./interpolation.component.css']
})

export class InterpolationComponent implements OnInit {
  interpolation:string = 'interpolation test'
  constructor() {}

  ngOnInit(): void {} 
}

또, TypeScript 클래스의 변수명을 사용하지 않고 아래와 같이 수식이나 표현을 넣어서 활용하는 방법도 가능합니다. interpolation과 비슷하지만 이러한 방식은 template expression (statment)라고 합니다.

<p>
  {{ 1 + 1 }}
</p>

<p>
  {{ (1 + 1) == 2 ? 'true' : 'false' }}
</p>

2. ngNonBindable

요소에 해당 속성을 추가하면 데이터 바인딩이 일어나지 않고 사용된 표현을 그대로 화면에 표시합니다. 소스 코드 등을 표시하는 경우 사용할 수 있겠죠?

 

<!-- interpolation.component.html -->

<p ngNonBindable>
  {{ interpolation }}
</p>

<p ngNonBindable>
  {{ 1 + 1 }}
</p>

<p ngNonBindable>
  {{ (1 + 1) == 2 ? 'true' : 'false' }}
</p>

이상으로 앵귤러 interpolation에 대해서 알아보았습니다.

---

참고

Angular