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 {}
}
<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>