angular html

Angular HTML テンプレート構文ガイド

概要

このガイドでは、AngularのHTMLテンプレート構文を使用して、動的なユーザーインターフェースを作成する方法について説明します。データバインディング、構造ディレクティブ、属性ディレクティブなど、Angularテンプレートの主要な機能を理解することができます。

データバインディングの概要

データバインディングはAngularの中心的な機能であり、コンポーネントのクラスとテンプレート間でデータをやり取りする方法を提供します。一方向データバインディングと双方向データバインディングの違いについて詳しく解説します。

データバインディングのタイプ	説明
一方向データバインディング	データがコンポーネントからテンプレートに流れる.
双方向データバインディング	データがコンポーネントとテンプレートの間で双方向に流れる.

データバインディングは、コンポーネントのデータをHTMLテンプレートに表示するための仕組みです。Angularでは、二重中括弧{{ }}を使用して、コンポーネントの変数をテンプレートに埋め込むことができます。

例：データバインディング

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  importData = 'importMessage';
}

app.component.html

<p>{{ importData }}</p>

実行結果

app.component.tsでは、importDataという変数を定義し、importMessageという文字列を代入しています。app.component.htmlでは、{{ importData }}と記述することで、importData変数の値をテンプレートに埋め込んでいます。このように、二重中括弧を使用することで、コンポーネントのデータをHTMLテンプレートに表示することができます。

双方向データバインディング

双方向データバインディングは、ビューとコンポーネントのデータの両方を同期させるための仕組みです。Angularでは、[(ngModel)]ディレクティブを使用して、双方向データバインディングを実現することができます。[(ngModel)]ディレクティブは、フォーム要素の値をコンポーネントの変数にバインドし、変数の値が変更されるとフォーム要素の値も更新されます。

双方向データバインディングを使用するには、FormsModuleモジュールをインポートする必要があります。

例：双方向データバインディング

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // インポート

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'masao';
}

app.component.html

<input type="text" [(ngModel)]="name">
<p>{{ name }}</p>

実行結果

この例では、入力フィールドに入力された値が、name変数にバインドされ、pタグに表示されます。name変数の値を変更すると、入力フィールドの値も更新されます。このように、[(ngModel)]ディレクティブを使用することで、ビューとコンポーネントのデータを双方向に同期させることができます。

条件分岐 if

条件分岐は、特定の条件に基づいてHTML要素を表示または非表示にするための仕組みです。Angularでは、*ngIfディレクティブを使用して、条件分岐を実現することができます。*ngIfディレクティブは、条件式が真の場合にのみHTML要素を表示します。

*ngIfディレクティブを使用するには、FormsModuleモジュールをインポートする必要があります。

例：条件分岐 if

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  flg = false;
}

app.component.html

<p *ngIf="flg">flgはtrueです。</p>
<p *ngIf="!flg">flgはfalseです。</p>

実行結果

この例では、flg変数がfalseなので、*ngIf="!flg"の条件式が真となり、「flgはfalseです。」というテキストが表示されます。flg変数をtrueに変更すると、「flgはtrueです。」というテキストが表示されるようになります。

条件分岐 switch

switch文は、複数の条件に基づいて異なるHTML要素を表示するための仕組みです。Angularでは、ngSwitchディレクティブを使用して、switch文を実現することができます。ngSwitchディレクティブは、式と一致するngSwitchCaseディレクティブを持つHTML要素を表示します。一致するngSwitchCaseディレクティブがない場合は、ngSwitchDefaultディレクティブを持つHTML要素が表示されます。

ngSwitchディレクティブを使用するには、FormsModuleモジュールをインポートする必要があります。

例：条件分岐 switch

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  sex = 'men';
}

app.component.html

<select [(ngModel)]="sex">
  <option value="men">男性</option>
  <option value="women">女性</option>
</select>

<div [ngSwitch]="sex">
  <p *ngSwitchCase="'men'">男性料金：1000円</p>
  <p *ngSwitchCase="'women'">女性料金：800円</p>
  <p *ngSwitchDefault>料金：1200円</p>
</div>

実行結果

この例では、セレクトボックスで選択された値がsex変数にバインドされます。ngSwitchディレクティブは、sex変数の値に基づいて、対応するngSwitchCaseディレクティブを持つpタグを表示します。例えば、sex変数がmenの場合、「男性料金：1000円」というテキストが表示されます。

ループ処理

ループ処理は、配列などのデータ構造を繰り返し処理するための仕組みです。Angularでは、*ngForディレクティブを使用して、ループ処理を実現することができます。*ngForディレクティブは、配列の各要素に対してHTML要素を繰り返し表示します。

*ngForディレクティブを使用するには、FormsModuleモジュールをインポートする必要があります。

例：ループ処理

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  names = ['田中', '佐藤', '鈴木'];
}

app.component.html

<ul>
  <li *ngFor="let name of names">{{ name }}</li>
</ul>

実行結果

この例では、names配列の各要素に対して、liタグが繰り返し表示されます。let name of namesという構文は、配列の各要素をname変数に代入することを意味します。このように、*ngForディレクティブを使用することで、配列の要素を簡単に表示することができます。

要素追加

変数の値をHTML要素の属性に追加するには、角括弧[]を使用します。

例：要素追加

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  url = 'https://www.google.com/';
}

app.component.html

<a [href]="url">Google</a>

実行結果

この例では、url変数の値がaタグのhref属性に追加されます。このように、角括弧を使用することで、変数の値をHTML要素の属性に追加することができます。

CSSを追加

ngClassディレクティブは、条件に基づいてHTML要素にCSSクラスを追加または削除するための仕組みです。ngClassディレクティブは、オブジェクトまたは配列を受け取ります。オブジェクトの場合、キーはCSSクラス名、値は条件式になります。条件式が真の場合、キーに対応するCSSクラスが要素に追加されます。

例：CSSを追加

app.component.css

.colorstyle {
  color: red;
}

app.component.html

<p [ngClass]="{colorstyle: true}">赤色のテキスト</p>
<p [ngClass]="{colorstyle: false}">黒色のテキスト</p>

実行結果

この例では、colorstyleクラスが定義されたCSSファイルapp.component.cssを読み込んでいます。最初のpタグでは、ngClassディレクティブの条件式がtrueなので、colorstyleクラスが追加され、テキストが赤色で表示されます。2番目のpタグでは、条件式がfalseなので、colorstyleクラスは追加されず、テキストはデフォルトの黒色で表示されます。

イベント追加

イベントリスナーは、HTML要素で発生したイベントを処理するための仕組みです。Angularでは、丸括弧()を使用して、イベントリスナーを追加することができます。丸括弧内には、イベント名と、イベントが発生したときに実行するコンポーネントのメソッドを指定します。

例：イベント追加

app.component.html

<button (click)="masao()">クリック</button>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  masao() {
    alert('クリックされました！');
  }
}

実行結果

この例では、ボタンをクリックすると、masao()メソッドが実行され、アラートダイアログが表示されます。このように、丸括弧を使用することで、HTML要素にイベントリスナーを追加することができます。

パイプ

パイプは、データをフォーマットするための仕組みです。Angularでは、パイプを使用して、日付のフォーマット、通貨のフォーマット、文字列の大文字化などを行うことができます。パイプは、テンプレート内でパイプ記号|を使用して適用します。

例：パイプ

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  text = 'masao';
}

app.component.html

<p>{{ text | uppercase }}</p>

実行結果

この例では、uppercaseパイプを使用して、text変数の値を大文字に変換しています。このように、パイプを使用することで、データを簡単にフォーマットすることができます。

自作タグ

自作タグは、独自のHTMLタグを作成するための仕組みです。Angularでは、コンポーネントを使用して、自作タグを作成することができます。コンポーネントは、HTMLテンプレート、CSSスタイル、およびTypeScriptコードを含む再利用可能なUI要素です。

例：自作タグ

まず、Angular CLIを使用して、origintagという名前の新しいコンポーネントを作成します。

ng generate component origintag

origintag.component.html

<p>これは自作タグです。</p>

app.component.html

<app-origintag></app-origintag>

実行結果

この例では、origintagコンポーネントを作成し、app.component.htmlで<app-origintag>タグを使用して表示しています。このように、コンポーネントを使用することで、独自のHTMLタグを作成することができます。

参考文献

QA

Q1: Angularでデータバインディングとは何ですか？

A1: データバインディングは、コンポーネントのクラスとテンプレート間でのデータのやり取りを可能にする機能です。

Q2: ngIfとngForは何に使用しますか？

A2: ngIfは条件によってDOM要素を表示・非表示にするために使用し、ngForは配列の各要素をループして表示するために使用します。

Q3: 属性ディレクティブはどのように機能しますか？

A3: 属性ディレクティブは、DOM要素のプロパティや外観を変更するために使用され、カスタムディレクティブの作成も可能です。