What is CommonModule in Angular 10 ?

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: