Why modules organize applications in Angular - See It in Action

Why modules organize applications

📖 Scenario: You are building a simple Angular app that shows a greeting message. To keep the app organized, you will create a module that groups the greeting component. This helps Angular know what parts belong together.

🎯 Goal: Create an Angular module called GreetingModule that declares a GreetingComponent. This module will organize the component so the app stays neat and easy to manage.

📋 What You'll Learn

Create a standalone component called GreetingComponent that displays 'Hello, Angular!'

Create a module called GreetingModule

Declare GreetingComponent inside GreetingModule

Export GreetingComponent from GreetingModule so it can be used elsewhere

💡 Why This Matters

🌍 Real World

Organizing components into modules helps large Angular apps stay manageable and clear.

💼 Career

Understanding Angular modules is essential for building scalable and maintainable web applications in professional development.

1

Create the GreetingComponent

Create a standalone Angular component called GreetingComponent that displays the text 'Hello, Angular!' inside a <p> tag.

Angular

// Create a standalone component called GreetingComponent
// It should display 'Hello, Angular!' inside a  tag

Need a hint?

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

2

Create the GreetingModule

Create an Angular module called GreetingModule using @NgModule. Do not add anything inside it yet.

Angular

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

// Create a module called GreetingModule
@NgModule({
  // Your code here
})
export class GreetingModule {}

Need a hint?

Use @NgModule decorator and export the class GreetingModule.

3

Declare GreetingComponent in GreetingModule

Inside the @NgModule decorator of GreetingModule, add declarations array and include GreetingComponent in it.

Angular

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

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

@NgModule({
  declarations: [
    // Add GreetingComponent here
  ]
})
export class GreetingModule {}

Need a hint?

Inside @NgModule, add declarations: [GreetingComponent].

4

Export GreetingComponent from GreetingModule

Add an exports array inside the @NgModule decorator of GreetingModule and include GreetingComponent so it can be used outside this module.

Angular

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

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

@NgModule({
  declarations: [GreetingComponent],
  exports: [
    // Export GreetingComponent here
  ]
})
export class GreetingModule {}

Need a hint?

Add exports: [GreetingComponent] inside @NgModule.