*ngIF directive in Angular

ngIf is used to display or hide the DOM Element based on the expression value assigned to it. The expression value may be either true or false.

Syntax:

<element *ngIf="condition">...</element>

Uses of *ngIf Directive:

Conditional Rendering: *ngIf is commonly used for conditional rendering of elements based on various conditions, such as user authentication status, data availability, or user interactions.
Error Handling: *ngIf can be used to display error messages or fallback content when certain conditions are not met, providing a seamless user experience.
Dynamic UI Components: *ngIf enables the dynamic rendering of UI components based on application state or user inputs, allowing for a more interactive and personalized user experience.

Example: Now we use *ngIf to conditionally render a message, based to a particular condition(either true or false) it changes the DOM. Here we have used a vaiable named “show”. If show is true then the text will be shown present in the div, if it is false then text will not be shown in the div.

HTML

<!-- app.component.html -->

<div class="center">
    <h2 class="green">
        w3wiki
    </h2>
    <h2 class="title">
        *NgIf directive in <span class="angular">Angular</span>
    </h2>
    <div class="bgGreen">
        <p *ngIf="show">
            This text will be shown <br> if the "show" varable is true
        </p>
    </div>

</div>

CSS

/* app.component.css */

.center {
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.5rem;
}

.green {
    color: rgb(28, 143, 28);
    font-size: 2.5rem;
    text-align: center;
}

.title {
    color: rgb(57, 23, 180);
    text-align: center;
}

.angular {
    color: rgb(237, 40, 40);
    font-size: 2.1rem;
}

.bgGreen {
    background-color: rgb(28, 143, 28);
    color: #ffff;
}

JavaScript

// app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { NgIf } from '@angular/common';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, CommonModule, NgIf],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss'
})
export class AppComponent {
    title = 'structuralD';
    show = true;
}

Output:

*ngIf directive in Angular

Use of ngIf and ngFor Directives in Angular

Angular is a very popular framework for building scalable web applications. It provides many features and tools to make the development process smooth. Two important directives in Angular are *ngIf and *ngFor. *ngIf is used to conditionally render HTML elements, while *ngFor is used to iterate over a collection of data. In this article, we will learn the use of *ngIf and *ngFor directives in Angular.

Tags:

#AngularJS-Directives #AngularJS #Web Technologies

Folder Structure:

2. *ngFor directive in Angular:

*ngIF directive in Angular

Syntax:

Uses of *ngIf Directive:

Output:

Use of *ngIf and *ngFor Directives in Angular

Similar Reads

Use of ngIf and ngFor Directives in Angular