Feature modules for organization in Angular - Mini Project: Build & Apply

Feature modules for organization

📖 Scenario: You are building a simple Angular app that shows a list of books and authors. To keep your code clean and organized, you want to separate the book-related code into its own feature module.

🎯 Goal: Create a feature module called BooksModule that declares a BooksComponent. Then import this module into the main AppModule so the app can display the books list.

📋 What You'll Learn

Create a feature module named BooksModule

Declare a component named BooksComponent inside BooksModule

Add a simple template in BooksComponent that shows the text 'Books list here'

Import BooksModule into the main AppModule

Bootstrap the AppComponent in AppModule

💡 Why This Matters

🌍 Real World

Feature modules help keep Angular apps organized by grouping related code. This makes apps easier to maintain and scale.

💼 Career

Understanding feature modules is essential for Angular developers working on medium to large projects where code organization is critical.

1

Create the BooksComponent

Create a component named BooksComponent with a selector app-books and a template that contains the text Books list here. Use the @Component decorator and export the class.

Angular

// Your code here to create BooksComponent

Need a hint?

Use @Component decorator with selector and template properties. Export the class BooksComponent.

2

Create the BooksModule

Create a feature module named BooksModule using the @NgModule decorator. Declare the BooksComponent inside the declarations array. Export the BooksComponent in the exports array.

Angular

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

@Component({
  selector: 'app-books',
  template: 'Books list here'
})
export class BooksComponent {}

// Your code here to create BooksModule

Need a hint?

Use @NgModule decorator with declarations and exports arrays. Export the class BooksModule.

3

Create the AppComponent

Create a root component named AppComponent with selector app-root. Its template should include the app-books selector to display the books list.

Angular

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

@Component({
  selector: 'app-books',
  template: 'Books list here'
})
export class BooksComponent {}

@Component({
  selector: 'app-root',
  template: ''
})
export class AppComponent {}

// Your code here to create AppComponent

Need a hint?

Use @Component decorator with selector and template. Export AppComponent.

4

Create the AppModule and import BooksModule

Create the root module named AppModule using @NgModule. Declare AppComponent in declarations. Import BooksModule in imports. Bootstrap the AppComponent.

Angular

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

@Component({
  selector: 'app-books',
  template: 'Books list here'
})
export class BooksComponent {}

@NgModule({
  declarations: [BooksComponent],
  exports: [BooksComponent]
})
export class BooksModule {}

@Component({
  selector: 'app-root',
  template: ''
})
export class AppComponent {}

// Your code here to create AppModule and import BooksModule

Need a hint?

Use @NgModule with declarations, imports, and bootstrap. Import BrowserModule and BooksModule. Export AppModule.