Angular7-templates
Angular7-テンプレート
Angular 7は、Angular2で使用される<template>の代わりに<ng-template>をタグとして使用します。 <ng-template>はAngular 4のリリース以来使用されており、以前のバージョン、つまりAngular 2は同じ目的で<template>を使用しています。 Angular 4以降の<template>ではなく<ng-template>を使用し始めた理由は、<template>タグとhtml <template>標準タグの間に名前の競合があるためです。 これは完全に廃止される予定です。 これは、Angular 4バージョンで行われた主要な変更の1つです。
テンプレートを* if else条件*とともに使用して、出力を確認します。
*_app.componentl_*
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>Welcome to {{title}}.</h1>
</div>
<div> Months :
<select (change) = "changemonths($event)" name = "month">
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable;then condition1 else condition2">
Condition is valid.
</span>
<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>
Spanタグの場合、 else 条件を含む if ステートメントを追加し、テンプレートcondition1またはelse condition2を呼び出します。
テンプレートは次のように呼び出されます-
<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>
条件が真の場合、 condition1 テンプレートが呼び出され、そうでない場合は condition2 が呼び出されます。
*_app.component.ts_*
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.componentl',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';
//declared array of months.
months = ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
isavailable = false;//variable is set to true
myClickFunction(event) {
//just added console.log which will display the event details in browser on click of the button.
alert("Button is clicked");
console.log(event);
}
changemonths(event) {
alert("Changed month from the Dropdown");
}
}
ブラウザでの出力は次のとおりです-
変数 isavailable はfalseなので、condition2テンプレートが出力されます。 ボタンをクリックすると、それぞれのテンプレートが呼び出されます。
*_app.component.ts_*
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.componentl',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';
//declared array of months.
months = ["January", "Feburary", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
isavailable = false;//variable is set to true
myClickFunction(event) {
this.isavailable = !this.isavailable;
//variable is toggled onclick of the button
}
changemonths(event) {
alert("Changed month from the Dropdown");
}
}
*isavailable* 変数は、次のようにボタンをクリックすると切り替わります-
myClickFunction(event) {
this.isavailable = !this.isavailable;
}
*isavailable* 変数の値に基づいてボタンをクリックすると、それぞれのテンプレートが表示されます-
ブラウザを調べると、domでspanタグを取得できないことがわかります。 次の例は、同じことを理解するのに役立ちます。
*app.componentl* には、以下に示すように、条件にspanタグと *<ng-template>* を追加していますが、
<span *ngIf = "isavailable;then condition1 else condition2">
Condition is valid.
</span>
<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>
ブラウザで同じものを検査すると、dom構造にspanタグと<ng-template>も表示されません。
HTMLの次のコード行は、domでspanタグを取得するのに役立ちます-
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1> Welcome to {{title}}. </h1>
</div>
<div> Months :
<select (change) = "changemonths($event)" name = "month">
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>
<div>
<span *ngIf = "isavailable; else condition2">
Condition is valid.
</span>
<ng-template #condition1>Condition is valid from template </ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>
*then* 条件を削除すると、ブラウザーに「Condition is valid」メッセージが表示され、domでもspanタグを使用できます。 たとえば、 *app.component.ts* では、 *isavailable* 変数をtrueにしています。