Angular - [ 속성 바인딩 ]

[속성] : 속성 바인딩, 태그안에서 사용되고 속성값으로 컴포넌트 클래스의 속성값과 연동

[속성명] = "클래스의 변수명"

app.component.ts

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

@Component({
  selector: 'app-root', // 이 컴포넌트를 쓰기위한 명칭 app-root -> index.html 에서 사용
  templateUrl: './app.component.html', // 화면 구성
  styleUrls: ['./app.component.css'], // 스타일 지정
})
export class AppComponent {
  title = '속성바인딩실습';
  imgName = '../assets/image/a.jpg';
  imgWidth = 200;
  imgHeight = 200;
}

app.component.html

<h1>{{ title }}</h1>
다음 이미지의 파일명과 width/height 값을 속성 바인딩으로 설정한다. <br />
<img [src]="imgName" [width]="imgWidth" [height]="imgHeight" />
<!-- 대괄호란 -->