Importing dependencies directly in Angular - Mini Project: Build & Apply

Importing dependencies directly in Angular

📖 Scenario: You are building a simple Angular standalone component that shows a greeting message. You want to import Angular's CommonModule directly into your component to use common directives like ngIf.

🎯 Goal: Create a standalone Angular component that imports CommonModule directly. Display a greeting message conditionally using *ngIf.

📋 What You'll Learn

Create a standalone Angular component named GreetingComponent

Import CommonModule directly in the component's imports array

Use *ngIf directive to conditionally show the greeting message

💡 Why This Matters

🌍 Real World

Standalone components with direct imports simplify Angular apps by reducing the need for NgModules and making components more reusable.

💼 Career

Understanding how to import dependencies directly in Angular components is essential for modern Angular development and improves code modularity and maintainability.

1

Create the standalone Angular component

Create a standalone Angular component named GreetingComponent with a template that contains a <h1> tag showing the text "Hello, Angular!". Use the @Component decorator with standalone: true.

Angular

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

// Create the standalone GreetingComponent below

Need a hint?

Use @Component with standalone: true and a simple template string.

2

Import CommonModule directly in the component

Import CommonModule from @angular/common and add it to the imports array inside the @Component decorator of GreetingComponent.

Angular

import { Component } from '@angular/core';
// Import CommonModule from @angular/common

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `Hello, Angular!`,
  // Add imports array here
})
export class GreetingComponent {}

Need a hint?

Remember to import CommonModule at the top and add it to the imports array in the decorator.

3

Add a boolean variable to control greeting visibility

Inside the GreetingComponent class, add a public boolean property named showGreeting and set it to true.

Angular

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  imports: [CommonModule],
  template: `Hello, Angular!`
})
export class GreetingComponent {
  // Add showGreeting boolean property here
}

Need a hint?

Declare showGreeting as a class property and assign true.

4

Use *ngIf directive to conditionally show the greeting

Update the template in GreetingComponent to use the *ngIf directive with the showGreeting property to conditionally display the <h1> greeting message.

Angular

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  imports: [CommonModule],
  // Update template to use *ngIf with showGreeting
  template: ``
})
export class GreetingComponent {
  showGreeting = true;
}

Need a hint?

Use *ngIf="showGreeting" inside the <h1> tag in the template.