[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