Angular Sharing Modules

Angular Sharing Module is not usually used in AngularJS but Angular Sharing Module provides an important function.

Your Angular SharedModule similarly contains code that will be used across your app and Feature Modules. But the difference is that you will import this SharedModule into the specific Feature Modules as needed. You DO NOT import the SharedModule into your main AppModule or CoreModule.

Common templates components should also go in the SharedModule. An example would be a global button component, eg ButtonComponent. These template components should be “dumb components” in that they should not expect or interact with any specific form of data. You should define a template, style, an @Output() event property, and maybe a @Input() string property for text inside the button so you can pass in whatever event you want to fire when a user clicks the button. Now all your buttons can look uniform across the app! Of course, this is an architectural decision left up to your discretion. It will make for easier unit testing and separation-of-concerns to follow the pattern though.

Creating Angular sharing modules allows you to organize and streamline your code. You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your app.

Consider the following module from an imaginary app:

import { CommonModule } from ‘@angular/common’;

import { NgModule } from ‘@angular/core’;

import { FormsModule } from ‘@angular/forms’;

import { CustomerComponent } from ‘./customer.component’;

import { NewItemDirective } from ‘./new-item.directive’;

import { OrdersPipe } from ‘./orders.pipe’;

@NgModule({

imports: [ CommonModule ],

declarations: [ CustomerComponent, NewItemDirective, OrdersPipe ],

exports: [ CustomerComponent, NewItemDirective, OrdersPipe,

CommonModule, FormsModule ]