[Angular] 더보기 기능 구현하기
Intro
Angular에서 더보기 기능 구현해보자. 데이터가 10개 이상 될 경우 더보기 버튼을 보여주고, 10개 이하일 경우 더보기 버튼을 숨겨줄 것이다.
How to implement
step 1. 프로젝트 생성하기
angular cli 를 이용하여 프로젝트를 생성했다. 프로젝트 생성은 Angular + Node JS 시작하기 를 참고하면 될 것 같다.
step 2. 더보기 함수 구현
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-more';
name = 'Angular';
show = 10;
data = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
increaseShow() {
this.show += 10;
}
}
- show : 기준 숫자
- data : 표출할 데이터 값
- increaseShow() : show 의 값을 기준 만큼 더해줌
step 3. 화면 구현
app.component.html
<div class="content" role="main">
<h2>Angular more button example</h2>
<ul style="list-style-type: square;" style="padding-left: 0px;">
<li *ngFor="let tag of data | slice:0:show; let i=index">
<a href="#" class="span-tag tag">{{ tag }}</a>
</li>
</ul>
<button class="button" *ngIf="show < data.length" (click)="increaseShow()">More</button>
</div>
- ngFor
- ngIf
- (click)
step 4. 확인
참고
해당 소스코드는 아래 github 에서 참고하길 바란다.
https://github.com/leyuri/angular-moreBtn-example
Author And Source
이 문제에 관하여([Angular] 더보기 기능 구현하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leyuri/Angular-더보기-기능-구현하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)