Shared Modules in Angular Tutorial 🎯

Welcome to the Shared Modules lesson in Angular! In this tutorial, we'll explore how to create and use shared modules in your Angular applications. Shared modules are essential for organizing your application, improving reusability, and promoting better code management. 💡 Pro Tip: Shared modules can be thought of as a toolbox, where we store reusable parts of our application.

What are Shared Modules?

Shared modules are Angular modules that contain components, directives, and services that can be used across different feature modules. They help in reducing duplication and promoting code reusability.

📝 Note: In Angular, a module is a collection of related components, directives, pipes, and services.

Creating a Shared Module 💡

Let's create a simple shared module called SharedModule.

bash

ng generate module shared

This command generates a new Angular module named SharedModule.

Importing the Shared Module ✅

To use the shared module, we need to import it into our feature module. For example, if we have a HomeModule and we want to use a component from SharedModule, we'd do:

typescript

import { SharedModule } from './shared/shared.module';

@NgModule({
  imports: [
    SharedModule
  ]
})
export class HomeModule { }

Declaring Shared Components 💡

To declare a component for sharing, we'll add it to the declarations array of the shared module.

typescript

// src/shared/shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MySharedComponent } from './my-shared.component';

@NgModule({
  declarations: [MySharedComponent],
  imports: [CommonModule],
  exports: [MySharedComponent]
})
export class SharedModule { }

📝 Note: The exports array contains the components, directives, and services that can be used outside of the shared module.

Using Shared Components 💡

Now that we've created a shared component, we can use it in our feature module.

html

<!-- src/app/home/home.component.html -->

<app-my-shared></app-my-shared>

Advanced Example 💡

Let's create a shared service for managing authentication.

bash

ng generate service auth

In auth.service.ts, we'll define methods for user login and logout.

typescript

// src/shared/auth.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  login(username: string, password: string) {
    // Implement user login logic here
  }

  logout() {
    // Implement user logout logic here
  }
}

Now, let's add the AuthService to our shared module.

typescript

// src/shared/shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MySharedComponent } from './my-shared.component';
import { AuthService } from './auth.service';

@NgModule({
  declarations: [MySharedComponent],
  imports: [CommonModule],
  providers: [AuthService],
  exports: [MySharedComponent, AuthService]
})
export class SharedModule { }

We've added the AuthService to the providers array, making it available throughout the application. Now, we can inject the AuthService in any component or service that requires user authentication.

Quiz 🎯

With this, you've learned the basics of creating and using shared modules in Angular. As you continue working with Angular, you'll find shared modules to be a valuable asset in organizing your application and promoting code reusability. 💡 Pro Tip: Always remember, the goal is to keep your code organized, maintainable, and reusable. Happy coding! 🚀