ngClass로 페이징 번호 효과내기

*공부 목적으로 적는것으로 코드가 다를수 있습니다.

 

페이징을 처리하고 번호를 클릭하니 번호가 표시되지 않아 표시를 만들려고 한다

 

<li *ngFor="let item of paging" (click)="movePage(item)" [ngClass]="item === mediaPage.currentPage?'active':'' ">

{{ item }}

</li>

 

아이템 번호와 현재페이지가 같으면 active 클레스를 실행 시키고 아니면 아무것도 안한다.

 

css 부분 

 

.page > ul > li.active { border:1px solid #303849; color:#fff; background:#303849; }

 

이미 css 에 page 라는 클래스가 잡혀 있어서 li.active 로 상속 클래스를 만들었다.