Angular Webアプリ開発入門5

はじめに

前回は、自動生成されたAngularプロジェクトがどのような構成になっているのか、どこをどのように修正して、自分が望む動作にカスタマイズできるのかを学んだ。今回は入力フォームを作り、ボタンがクリックされたとき何かプログラムを実行したり、メッセージを画面に差し込んだりする方法について学ぶ。

フォームと文字列の出力部分を作成する

入力フォームを作る

 

app.component.html

<!–The content below is only a placeholder and can be replaced.–>

<app-simple-form></app-simple-form>

 

simple-form.component.html

<input>

+

<input>

<button>Calc</button>

 

上記のsimple-form.component.htmlのソースコードはだたのHTMLである。この段階では、プログラムとしてなにも動かい。ファイルを保存すると、それを検知して、ブラウザがリロードし、2つのテキストボックスとCalcボタンと書かれたものが表示されるだけである。

 

計算結果を表示する箇所を作る

次にTypeScriptのプログラムと連携する場所を作っていく。画面の末尾に、「計算家結果を表示する場所」を確保する。

simple-form.component.html

<input>

+

<input>

<button>Calc</button>

<div>{{ result }}</div>

この「{{ と }}}で囲む表記は前回学んだとおり、コンポーネントのプロパティの値をそこに埋め込むための表記である。今回は、「{{result}}」とかいてるので、コンポーネントのresultプロパティの値が差込まれる。

プロパティを作る

まだ、コンポーネントのプロパティを作っていないため、「{{result}}」の箇所は空白である。
次に、コンポーネントを構成するTypeScriptのプログラムを修正して、このresultプロパティを作成する。

 

import { Component, OnInit } from ‘@angular/core’;

@Component({

selector: ‘app-simple-form’,

templateUrl: ‘./simple-form.component.html’,

styleUrls: [‘./simple-form.component.css’]

})

export class SimpleFormComponent implements OnInit {

result:string=”足し算をします”;

constructor() { }

ngOnInit() {

}

}

プロパティを追加する方法はいくつかあるが、ここでは「クラスの中に、変数を宣言する」方法で、追加したのは下記。

result:string=”足し算をします”;

これを追加することによって、クラスにresultという変数が作られ、それがresultのプロパティとして機能するようになる。「=」の右側に表示しているのは文字列です。

ボタンがクリックされたときの処理を作る

次に「Calc」ボタンがクリックされたときの処理を記述する。

1.実行する処理をコンポーネント側にメソッドとして実装する
コンポーネントのメソッドとして記述する。メソッドとはコンポーネントにおけるプログラムの塊のことであり、好きに名前をつけることが出来る。仮に「addAndShow」だとすると次のように記述する。

export class SimpleFormComponent implements OnInit {

result:string=”足し算をします”;

addAndShow() :void {

}

テンプレート側のボタンとコンポーネント側のメソッドを結びつける。

<button (click)=”addAndShow()”>Calc</button>

これはAngularの特殊な記法で、ボタン上で「click(クリックされた)」とい事象が発生したときは、addAndShowという名前のメソッド実行する—-という意味になる。

クリックされたときに実行したい処理をメソッドとして書く

コンポーネントに、ボタンがクリックされたときに実行するメソッドを作る。メソッドの名前は何でも構わないが、ここではaddAndShowとする。

addAndShow() :void {

this.result=”計算しました”;

}

上記ソースはTypeScriptの文法でメソッド定義を書いている。
これによってresultプロパティの値が変わることになり、「足し算します→計算しました」に差し替わる。

終わりに

これで、ボタンがクリックされたとき何かプログラムを実行したり、メッセージを画面に差し込んだりする方法が分かった。次回は、テキストボックスに入力された読み込む処理を作っていく。

コメント