3월까지 끝내야하는 프로젝트가 생겼다. 이제부터 미뤄왔던 angular를 공부하면서 반드시 프로젝트 마무리 하도록 노력해나갈 것이다. 이 문서는 단순 개인 정리용으로 기록 되었다.
git
: https://github.com/boakim/MySearchProject
기록영상
: https://youtu.be/_vOkcphGR3A
페이징 기능을 구현할 것이다. DataSource를 잘 연결 시켜주면 알아서 잘 보여준다. 이것이 Component 기반 개발의 장점이다!
css파일을 다음과 같이 수정한다. flex 오랜만에 사용한다. 알아두면 참 편한 css이다.
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
margin-top: 30px;
}
.mat-table{
overflow: auto;
max-height: 500px;
}
.mat-header-cell.mat-sort-header-sorted{
color: black;
}
.list-table-style{
font-family: Georgia;
}
.list-header-style{
background-color: beige;
}
기존에 단순하게 데이터를 나열할때는 아래와 같이 코딩하였으나, 페이징 기능을 추가 하기 위해서는 필요한 작업이 있다. MatTableModule
, MatPaginatorModule
이라는 모듈들을 사용 할 것이다.
<div>
<thead>
<th>ISBN</th>
<th>Title</th>
<th>Author</th>
<th>Price</th>
</thead>
<tbody>
<tr *ngFor="let book of books">
<td>{{book.bisbn}}</td>
<td>{{book.btitle}}</td>
<td>{{book.bauthor}}</td>
<td>{{book.bprice}}</td>
</tr>
</tbody>
</div>
아래와 같이 변경한다. mat-table
, mat-paginator
아직 정말 익숙하지 않다. 페이지 여러개를 만들어 나가면 익숙해 질거라 믿으며, 계속 공부를 진행해 봅시다.
<div class="example-container mat-elevation-z8">
<mat-table class="list-table-style" #table [dataSource]="dataSource">
<ng-container matColumnDef="bisbn">
<mat-header-cell *matHeaderCellDef>ISBN</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.bisbn}}</mat-cell>
</ng-container>
<ng-container matColumnDef="btitle">
<mat-header-cell *matHeaderCellDef>title</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.btitle}}</mat-cell>
</ng-container>
<ng-container matColumnDef="bauthor">
<mat-header-cell *matHeaderCellDef>author</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.bauthor}}</mat-cell>
</ng-container>
<ng-container matColumnDef="bprice">
<mat-header-cell *matHeaderCellDef>price</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.bprice}}</mat-cell>
</ng-container>
<mat-header-row class="list-header-style" *matHeaderRowDef="displayedColumns">
</mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #paginator
[pageSize] = "5"
[pageSizeOptions]="[5,10,20]"
showFirstLastButtons>
</mat-paginator>
</div>
관련된 모듈을 추가해봅시다.
import { MatTableModule } from '@angular/material';
import { MatPaginatorModule} from '@angular/material';
@NgModule({
...
imports: [
...
MatTableModule,
MatPaginatorModule
]
})
export class BookSearchModule { }
import {Component, ViewChild} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {MatPaginator, MatTableDataSource} from '@angular/material';
interface IBook {
bauthor: string;
bdate: string;
btranslator: string;
bpublisher: string;
btitle: string;
bprice: number;
bisbn: string;
bimgurl: string;
}
@Component({
selector: 'app-list-box',
templateUrl: './list-box.component.html',
styleUrls: ['./list-box.component.css']
})
export class ListBoxComponent {
displayedColumns = ['bisbn', 'btitle', 'bauthor', 'bprice'];
dataSource1;
books: IBook[];
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private http: HttpClient) {
this.http.get<IBook[]>('assets/data/book.json')
.subscribe(res => {
this.books = res;
this.dataSource1 = new MatTableDataSource<IBook>(this.books);
this.dataSource1.paginator = this.paginator;
});
}
}
페이징 기능이있는 테이블 생성이 끝났다.