Angular最速マスターへの道 第2章
昨日、Angular6.0.8がリリースされました。
Shadow DOMのサポートが追加された他は、今回はバグ修正が多かったようです。
さぁ今回もAngular最速マスターへの道進めていきましょう。
第2章目次
- Forms
- Directive
- Template
Forms
AngularのFormsは機能がたくさん詰まっていますので
ひとまず一番簡単でよく使用する機能をご紹介していきます。
と、まずFormsModuleを使用できるようにAppModuleに設定しましょう。
// 省略
import { FormsModule } from '@angular/forms'; // ここを追記
@NgModule({
imports: [
FormsModule, // ここを追記
...
// 省略
NgModel
<input>などにプロパティを渡してそれに値を格納してもらうことができます。
使用するComponentにプロパティを用意して早速書いてみましょう。
// 例: second.component.ts
// 省略
export class SecondComponent implements OnInit {
public word: string = '';// プロパティを追加
// 省略
}
<!-- second.component.html -->
<form>
<input type="text" class="form-control" name="word" [(ngModel)]="word" placeholder="入力してください">
</form>
<div>
入力した文字：<br>{{word}}
</div>
DEMOはこちら
フォームに何か文字を入力してみてください。
リアルタイムで入力した文字が表示されていると思います。
書き方もそこまで難しくないですよね。
NgModelで注意しておくポイントとしては、nameオプションを必ず書くことです。
書かないとエラーになりますので、注意してください。
Directive
Directiveにはいくつかの種類があります。
先ほど使用したNgModelも実はDirectiveです。
今回はNgModelとは少し違う種類の構造Directiveと呼ばれるものの、よく使う2つの例をみてみましょう。
NgIf
字面から見てもなんとなくわかるように、if文の役割を持ったDirectiveです。
やってみたらすぐにわかるので早速書いてみましょう。
// 例: second.component.ts
// 省略
export class SecondComponent implements OnInit {
// 下記のプロパティを追加
public name: string = '';
public isClicked: boolean = false;
// 下記のメソッドを追加
public click(): void {
this.isClicked = true;
}
// 省略
}
<form>
<input type="text" name="name" [(ngModel)]="name" placeholder="name" required>
<button type="submit" [disabled]="!name" (click)="click()">SUBMIT</button>
</form>
<div *ngIf="isClicked">
初めまして！ {{name}} さん！
</div>
DEMOはこちら
ここではボタンを押すとclickイベントが発火し、typescriptに書いたclick()メソッドが呼び出されます。
ここでisClickedプロパティがtrueになるので押す前に表示されていなかった文章が表示された形です。
NgFor
これはループ処理の役割です。PHPで言う所のforeachとほぼ同じと認識してもらえればいいと思います。
こちらもちゃちゃっと書いていきましょう。
// 例: second.component.ts
// 省略
export class SecondComponent implements OnInit {
// 下記のプロパティを追加
public members: {id: number; name: string}[] = [
{id: 1, name: 'Mao Miyaji'},
{id: 2, name: 'Taro Yamada'},
{id: 3, name: 'Jiro Tanaka'},
{id: 4, name: 'Hanako Sato'},
{id: 5, name: 'Naoko Kato'},
];
// 省略
}
<table>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let member of members">
<td>{{member.id}}</td>
<td>{{member.name}}</td>
</tr>
</tbody>
</table>
DEMOはこちら
list形式でもいいのですが、今回は連想配列を使用したのでわかりやすいようにtable形式で表示させてみました。
membersという配列をngForでループして、値をmemberという変数で定義して使用しています。
Template
Templateは「決まった構造を持つもの」として認識していただければいいかなと思います。
ComponentにもtemplateとかtemplateUrlとかを設定していると思います。それです。
色々な使い方がありますがNgIfと一緒によく使用する書き方をひとつやってみましょう。
// 例: second.component.ts
// 省略
export class SecondComponent implements OnInit {
// 下記のプロパティを追加
public fruits: string[] = [
'apple', 'orange', 'grape', 'strawberry', 'lemon'
];
public selectedFruit: string = '';
// 省略
}
<select name="fruit" [(ngModel)]="selectedFruit">
<option value="">--果物を選んでください--</option>
<option *ngFor="let item of fruits" [value]="item">{{item}}</option>
</select>
<ng-container *ngIf="selectedFruit">
<div *ngIf="selectedFruit == 'strawberry' || selectedFruit == 'apple'; then redFruit; else notRedFruit">
ここは表示されないよ！
</div>
<ng-template #notRedFruit>{{selectedFruit}}は赤い果物ではないです</ng-template>
<ng-template #redFruit>
<span class="text-danger">{{selectedFruit}}は赤い果物です</span>
</ng-template>
</ng-container>
DEMOはこちら
さぁ今回ご紹介したすべてを総動員したコードにしてみました笑
NgIfにはthenとelseがあり、if文でtrueのときにthen、falseの時にelseのTemplateを呼び出すことができます。
<ng-template #テンプレート名></ng-template>でTemplateを作成して、呼び出された時に返す構造を用意してあげます。
ちなみにng-templateで定義したテンプレートはその定義したhtmlの中でならどこでも呼ぶことができます。
同じ処理を何度も書かなくて済むので便利ですよ。
まとめ
今回の第2章では頻繁に使う便利機能のご紹介みたいになりましたがいかがでしたでしょうか？
Angularを始めると必ずといって良いほどこれらは使用することになると思うのでこの機会に覚えてみてください！
次章予告
- ModuleとRouting応用
- 親子関係に位置するComponent
参考
Angular最速マスターへの道シリーズはGitHubに公開しています。
