Angularの詳細ビューの実装

Intro

How to implement

step 1. プロジェクトの作成

step 2. その他のビュー関数の実装

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

step 3. スクリーン実装

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

step 4. 確認

リファレンス