Skip to content
Related Articles

Related Articles

Improve Article

What is CommonModule in Angular 10 ?

  • Last Updated : 30 Apr, 2021
Geek Week

In this article, we are going to see what is CommonModule in Angular 10 and how to use it.

CommonModule is used to export all the basic Angular directives and pipes. It is re-exported when we import BrowserModule into our angular application, BrowserModule is automatically imported into our application when we create our Angular application using ‘ng new’ command

Syntax: CommonModule is automatically imported by BrowserModule when the app is created.

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

  imports: [
    BrowserModule,
  ]
})
export class AppModule { }

Directives Imported:

  • NgClass
  • NgComponentOutlet
  • NgForOf
  • NgIf
  • NgPluralCase:
  • NgStyle
  • NgSwitch
  • NgSwitchCase
  • NgSwitchDefault
  • NgTemplateOutlet

Pipes Imported:



  • AsyncPipe
  • CurrencyPipe
  • DatePipe
  • DecimalPipe
  • I18nPluralPipe
  • I18nSelectPipe
  • JsonPipe
  • KeyValuePipe
  • LowerCasePipe
  • PercentPipe
  • SlicePipe
  • TitleCasePipe
  • UpperCasePipe

Approach: 

  • Create the Angular app to be used
  • There is no need for any import for the CommonModule to be used
  • In app.module.ts CommonModule is imported through BrowserModule.
  • Pipes and directives will be imported automatically, so we can use them easily.
  • Make the necessary files for desired output.
  • Serve the angular app using ng serve to see the output.

Example 1:

app.module.ts




import { NgModule } from '@angular/core';
// BrowserModule automatically imports all CommonModule Dependencies
  
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Adding Imports
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts




import { Component, OnInit } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    geek = "GeekClass";
    g = document.getElementsByClassName(this.geek);
}

app.component.html




<!-- use of ngClass directive -->
<h1 [ngClass] = "geek">
  GeeksforGeeks
</h1>
  Upper Heading's class is : "{{ g[0].className }}"

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :