How to use Angular’s ngIf directive

How to use Angular’s ngIf directive

Angular comes standard with a directive called ngIf directive.

It is a simple if statement, and its usage is to display if the if statement is true.

The way to describe it is as follows.


<div *ngIf='flg'>


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

selector: 'app-dell',
templateUrl: './dell.component.html',
styleUrls: ['./dell.component.css']
export class DellComponent implements OnInit {

constructor() { }
flg = true;
ngOnInit() {

flg = true; so the div tag is visible.

Angular のngIf ディレクティブの使い方

Since Angular4, ngIf~else statements can be written.


<div *ngIf='flg; else Statement'> <!-- Note the enclosed area. -->
<ng-template #Statement>

If flg is set to false, the following is displayed.

Angular のngIf ディレクティブの使い方


The variable part of ngIf='variable' is not necessarily of type boolean.

I checked for cases where the behavior is false.

true true
false false
null false
undefined false
[] true
{} true
0 false
1 true
-1 true

To use ngIf, the following must be imported in app.module.ts

import { FormsModule } from '@angular/forms';

imports [


Discover more from 株式会社CONFRAGE ITソリューション事業部

Subscribe now to keep reading and get access to the full archive.

Continue reading

Copied title and URL