[解決済み] NGIf else "の使い方を教えてください。

質問

Angularを使っているのですが、その中で *ngIf else (バージョン 4 以降で利用可能) を使用した例です。

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

で同じ動作をさせるにはどうしたらよいでしょうか？ ngIf else ?

解決方法は？

Angular 4と5 :

使用方法 else :

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

を使用することもできます。 then else :

<div *ngIf="isValid;then content else other_content">here is ignored</div>
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>

または then を単独で使用することができます。

<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>

デモです。

プランカー

詳細はこちら

<ng-template> はAngular独自の実装です。 <template> というタグがあります。 MDNによると :

HTML <template> 要素は、クライアント側の ページがロードされるときにレンダリングされないが、レンダリングされる可能性があるコンテンツ。 その後、JavaScriptを使用して実行時にインスタンス化されます。