Approach 1 : Exporting the Component from its Module

Approach 2 : Moving the Component to the Shared Module

Export the component

In the module , wherever the component is defined , it needs to be declared in the declarations array of the `@NgModule` decorator. We also need to export the required component in the `exports` array , so that we can use the component in the other module.

Import the Module

In the module, where we are trying to use the component, we need to import the module that contains the component in the `imports` array.

Use the component

Now we can directly use the component in the templates of components that belong to the importing module.

Example:

Let us take an example to understand the above approach.

Step 1: Install the Angular CLI using the following command

npm install -g @angular/cli

Step 2: Create a new Angular Project.

ng new new-project
cd new-project

Step 3: To start the application run the following command.

ng serve

Step 4: Let us create a new module

cd src
ng g module sample

So here, we are creating a new module named sample .

Step 5 : Let us create a new component inside the module

ng g c loader

The above command creates a new component called loader inside the sample module.

Step 6: Usage of component

HTML

<!-- app.component.html -->
<div>
  <h3>Usage of Component from other module:</h3>
  <app-loader></app-loader>
</div>

HTML

<!-- loader.component.html -->
<p>loader component from other module works!</p>

JavaScript

//App.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { SampleModule } from 'src/sample/sample.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        SampleModule,
        BrowserAnimationsModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule { }

JavaScript

//sample.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoaderComponent } from './loader/loader.component';

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

Output:

Use component from another module -Angular

Angular’s modular architecture is one of its core strengths, allowing it to break down large applications into smaller, manageable pieces. A key aspect of modularity in Angular is the ability to share components across different modules. You can promote code reuse and maintainability by exporting and importing components between modules. In this article, we’ll see how to use Angular’s modularity by sharing components across modules.

Table of Content

Module Export and Import
Benefits of Sharing Components Across Modules
Exporting the Component from its Module
Moving the Component to the Shared Module

Tags:

#AngularJS-Basics #AngularJS #Web Technologies

Module Export and Import