컴포넌트 템플릿에 문자열 바인딩 추가하기

이번 실습에서는 Angular 템플릿에 문자열 바인딩을 추가해 동적 데이터를 표시하는 방법을 알아봅니다.

학습 목표

• HousingLocation 템플릿에 문자열 바인딩한 값을 표시합니다.
• 브라우저에 주택 정보를 표시합니다.

문자열 바인딩 개념 살펴보기

이 단계에서는 문자열 바인딩으로 input 프로퍼티의 값을 템플릿에 표시합니다.

Angular 템플릿에서 {{ expression }}을 사용하면 프로퍼티, 입력값, 유효한 JavaScript 표현식의 값을 표시할 수 있습니다.

자세한 내용은 문자열 바인딩으로 값 표시하기 가이드를 참고하세요.

1. HousingLocation 템플릿에 문자열 바인딩 추가하기

   이 단계에서는 HousingLocation 템플릿에 새 HTML 구조와 문자열 바인딩을 추가합니다.

   코드 에디터에서 다음 작업을 수행하세요:

   1. src/app/housing-location/housing-location.ts를 여세요.
   2. @Component 데코레이터의 template 프로퍼티에서 기존 HTML 마크업을 다음 코드로 바꾸세요:

   housing-location.ts의 HousingLocation 템플릿 수정하기

   import {Component, input} from '@angular/core';
   import {HousingLocationInfo} from '../housinglocation';
   
   @Component({
     selector: 'app-housing-location',
     template: `
       <section class="listing">
         <img
           class="listing-photo"
           [src]="housingLocation().photo"
           alt="Exterior photo of {{ housingLocation().name }}"
           crossorigin
         />
         <h2 class="listing-heading">{{ housingLocation().name }}</h2>
         <p class="listing-location">{{ housingLocation().city }}, {{ housingLocation().state }}</p>
       </section>
     `,
     styleUrls: ['./housing-location.css'],
   })
   export class HousingLocation {
     housingLocation = input.required<HousingLocationInfo>();
   }

   수정된 템플릿은 프로퍼티 바인딩으로 주택 정보의 photo 값을 src 프로퍼티에 연결합니다. alt 어트리뷰트에는 문자열 바인딩을 사용해 이미지에 대한 설명을 추가합니다.

   또한 문자열 바인딩으로 주택 정보의 name, city, state 값을 표시합니다.

2. 브라우저에서 변경 사항 확인하기

   1. 모든 변경 사항을 저장하세요.
   2. 브라우저를 열어 앱에 예제 데이터의 사진, 도시, 주 정보가 표시되는지 확인하세요.

SUMMARY: 이번 실습에서는 새 HTML 구조를 추가하고 Angular 템플릿 문법으로 HousingLocation 템플릿에 값을 표시했습니다.

이제 다음 두 가지 기능을 구현할 수 있습니다:

• 컴포넌트에 데이터 전달하기
• 문자열 바인딩으로 템플릿에 값 표시하기

이 기능을 활용하면 앱에서 데이터를 공유하고 브라우저에 동적 값을 표시할 수 있습니다. 여기까지 잘 따라오셨습니다.

이 실습에서 다룬 내용을 더 알아보려면 다음 문서를 참고하세요: