Angular 2-ディレクティブ

ディレクティブ*は、HTMLの機能を拡張するために使用されるカスタムHTML要素です。 Angular 2には、BrowserModuleモジュールの一部として呼び出される以下のディレクティブがあります。

ngif
ngFor

app.module.tsファイルを表示すると、次のコードとBrowserModuleモジュールが定義されていることがわかります。このモジュールを定義すると、2つのディレクティブにアクセスできます。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

それでは、各ディレクティブを詳しく見ていきましょう。

ngIf

*ngif* 要素は、trueと評価された場合にHTMLコードに要素を追加するために使用されます。そうでない場合、要素はHTMLコードに追加されません。

構文

*ngIf = 'expression'

式がtrueと評価された場合、対応する要素が追加されます。それ以外の場合、要素は追加されません。

ここで、* ngifディレクティブを使用する方法の例を見てみましょう。

ステップ1 *-最初にappStatusという名前のクラスにプロパティを追加します。これはブール型になります。この値をtrueのままにします。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appStatus: boolean = true;
}

ステップ2 *-app.componentlファイルに次のコードを追加します。

<div *ngIf = 'appStatus'>{{appTitle}} finddevguides </div>

上記のコードには、* ngIfディレクティブがあります。ディレクティブでは、appStatusプロパティの値を評価しています。プロパティの値はtrueと評価される必要があるため、divタグがブラウザに表示される必要があります。

上記のコードを追加すると、ブラウザに次の出力が表示されます。

出力

ngIf

ngFor

*ngFor* 要素は、Forループの条件に基づいて要素に使用されます。

構文

*ngFor = 'let variable of variablelist'

変数は、 variablelist の値を表示する一時変数です。

ここで、* ngForディレクティブを使用する方法の例を見てみましょう。

ステップ1 *-最初にappListという名前のクラスにプロパティを追加します。これは、任意のタイプの配列を定義するために使用できるタイプになります。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "Name" : "One"
   },

   {
      "ID": "2",
      "Name" : "Two"
   } ];
}

したがって、appListを2つの要素を持つ配列として定義しています。各要素には、IDと名前として2つのサブプロパティがあります。

ステップ2 *-app.componentlで、次のコードを定義します。

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <li>{{lst.Name}}</li>
   </ul>
</div>

上記のコードでは、ngForディレクティブを使用してappList配列を反復処理しています。次に、各リスト項目が配列のIDおよび名前パラメーターであるリストを定義します。

上記のコードを追加すると、ブラウザに次の出力が表示されます。

出力

ngFor

Angular2-directives

目次

Angular 2-ディレクティブ

ngIf

構文

出力

ngFor

構文

出力