Angular 入門してみる2
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' }; }
実行結果
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>
実行結果
以上。特にメモなし。