*ngIf for conditional rendering in Angular - Mini Project: Build & Apply

Using *ngIf for Conditional Rendering in Angular

📖 Scenario: You are building a simple Angular component that shows a welcome message only if the user is logged in. This is a common pattern in websites where some content is visible only to logged-in users.

🎯 Goal: Create an Angular standalone component that uses *ngIf to conditionally show a welcome message when the user is logged in.

📋 What You'll Learn

Create a boolean variable isLoggedIn to represent the user's login status.

Add a configuration variable welcomeMessage with the text to display.

Use *ngIf in the template to show the welcome message only if isLoggedIn is true.

Complete the component with proper Angular standalone setup and accessibility.

💡 Why This Matters

🌍 Real World

Conditional rendering is essential in web apps to show or hide content based on user actions or status, like login state or permissions.

💼 Career

Understanding *ngIf and conditional rendering is fundamental for Angular developers building interactive and user-friendly applications.

1

Create the login status variable

In the Angular component class, create a boolean variable called isLoggedIn and set it to false.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: ``,
})
export class WelcomeComponent {
  // Create a boolean variable isLoggedIn and set it to false
  
}

Need a hint?

Use isLoggedIn = false; inside the component class.

2

Add the welcome message variable

Add a string variable called welcomeMessage in the component class and set it to 'Welcome back, user!'.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: ``,
})
export class WelcomeComponent {
  isLoggedIn = false;
  // Add a string variable welcomeMessage with the text 'Welcome back, user!'
}

Need a hint?

Use welcomeMessage = 'Welcome back, user!'; inside the component class.

3

Use *ngIf to conditionally show the message

In the component's template, use *ngIf="isLoggedIn" on a <p> tag to display the welcomeMessage only when isLoggedIn is true.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `
     tag to show welcomeMessage only if isLoggedIn is true -->
  `,
})
export class WelcomeComponent {
  isLoggedIn = false;
  welcomeMessage = 'Welcome back, user!';
}

Need a hint?

Use <p *ngIf="isLoggedIn">{{ welcomeMessage }}</p> in the template.

4

Complete the component with accessibility and toggle

Add a button below the message with (click) event to toggle isLoggedIn. Add aria-live="polite" to the <p> tag for accessibility.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `
    {{ welcomeMessage }}
    
  `,
})
export class WelcomeComponent {
  isLoggedIn = false;
  welcomeMessage = 'Welcome back, user!';

  // Add a method to toggle isLoggedIn
}

Need a hint?

Add aria-live="polite" to the <p> tag and a button with (click)="toggleLogin()". Define toggleLogin() method to flip isLoggedIn.