Angular - [ 인터폴레이션바인딩의 interface선언과 사용 ]

book이라는 ts파일의 interface생성

ng g interface book[경로명]/book[파일명]

export interface Book {
  id: string;
  name: string;
  price: number;
  date: string;
  img: string;
}

터미널에 적어준다. 

## interface의 사용
### book.component.ts
``` javascript
import { Component, OnInit } from '@angular/core';
import { Book } from './book';	// 선언된 interface import
@Component({
  selector: 'app-book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.css'],
})
export class BookComponent {
  titleName = '도서목록';
  books: Book[] = [
    // interface의 배열 타입 선언
    {
      id: 'p01',
      name: '위험한 식탁',
      price: 2000,
      date: '20190401',
      img: 'a.jpg',
    },
    {
      id: 'p02',
      name: '공부의 비결',
      price: 2000,
      date: '20190401',
      img: 'b.jpg',
    },
    {
      id: 'p03',
      name: '오메르타',
      price: 2000,
      date: '20190401',
      img: 'c.jpg',
    },
    {
      id: 'p04',
      name: '행복한 여행',
      price: 2000,
      date: '20190401',
      img: 'd.jpg',
    },
    {
      id: 'p05',
      name: '해커스 토익',
      price: 2000,
      date: '20190401',
      img: 'e.jpg',
    },
    {
      id: 'p06',
      name: '도로안내서',
      price: 2000,
      date: '20190401',
      img: 'f.jpg',
    },
  ];
  getTitleName() {
    return this.titleName;
  }

  ngOnInit(): void {}
}

book.component.html

<h1>{{ getTitleName() }} {{ books.length }}권</h1>
<ul>
  <li *ngFor="let book of books">	<!-- books중 하나씩 book으로 뽑아 배열을 돈다.-->
    <img src="../../assets/image/{{ book.img }}" width="100" height="100" />
    {{ book.name }}
  </li>
</ul>

실행화면