2019-05-28

Angular 入門してみる2

Angular

Angular入門してみる2

Angular 日本語ドキュメンテーションを社員名簿にアレンジしたもの。
今回は，名簿一覧の表示とtemplateの駆動を実装。

1．ComponentとTemplateを実装

社員情報はMemberプロパティに受け取る。
templateはComponentデコレーションに実装。
selectorはそのままhtmlタグとして使うことが出来ます。

import { Component } from '@angular/core';

export class Member {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <div>
      id: {{member.id}}
    </div>
    <div>
      name: {{member.name}}
    </div>
  `,
})

export class AppComponent {
  title = '自社社員名簿';
  member: Member = {
    id: 10,
    name: 'user1'
  };
}

実行結果
f:id:noinoi_monstS4l:20190528234602p:plain

2．社員名簿の配列を作成し一覧表示

社員データは複数あることが考えられるので，適当な配列を用意。

export const MEMBERS: Member[] = [
  {id: 10, name: 'test10'},
  {id: 11, name: 'test10'},
  {id: 12, name: 'test10'},
  {id: 13, name: 'test10'},
  {id: 14, name: 'test10'},
  {id: 15, name: 'test10'},
];

また，AppComponentクラスでmemberが受け取るプロパティを先程の配列に変更。

export class AppComponent {
  title = '自社社員名簿';
  member = MEMBERS;
}

次に，templateを編集します。liタグに「*ngFor」を追加することでfor文を実現。
ulタグのmembersタグは後ほどCSSにて使います。

    <h1>{{title}}</h1>
    
    <ul class="members">
    <li *ngFor="let member of member">
      <span class="badge">{{member.id}}</span>{{member.name}}
    </li>
    </ul>
    
    <div>
      id: {{member.id}}
    </div>
    <div>
      name: {{member.name}}
    </div>