What is CommonModule in Angular 10 ? Last Updated : 30 Apr, 2021 Comments Improve Suggest changes Like Article Like Report 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: NgClassNgComponentOutletNgForOfNgIfNgPluralCase:NgStyleNgSwitchNgSwitchCaseNgSwitchDefaultNgTemplateOutlet Pipes Imported: AsyncPipeCurrencyPipeDatePipeDecimalPipeI18nPluralPipeI18nSelectPipeJsonPipeKeyValuePipeLowerCasePipePercentPipeSlicePipeTitleCasePipeUpperCasePipe Approach: Create the Angular app to be usedThere is no need for any import for the CommonModule to be usedIn 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: Comment More infoAdvertise with us Next Article What is a custom directive in Angular? T taran910 Follow Improve Article Tags : Web Technologies AngularJS Angular10 Similar Reads What is the AppModule in Angular ? In Angular, AppModule plays an important role as the entry point to an Angular application. In this article, we'll learn about what AppModule is, its structure, and its significance in Angular applications. We'll also look at some examples to have a clear understanding. Table of Content What is AppM 4 min read What is a custom directive in Angular? Angular, a popular framework for building dynamic web applications, offers a powerful feature known as custom directives. These directives extend the functionality of HTML elements, enabling to create reusable components and add behavior to their applications. In this article, we'll learn about the 4 min read What is APP_BASE_HREF in Angular 10 ? In this article, we are going to see what is APP_BASE_HREF in Angular 10 and how to use it. APP_BASE_HREF returns a predefined DI token for the base href of the current page. The APP_BASE_HREF is the URL prefix that should be preserved. Syntax:  provide: APP_BASE_HREF, useValue: '/gfgapp' Approach: 1 min read What is NgStyle in Angular 10 ? In this article, we are going to see what is NgStyle in Angular 10 and how to use it. NgStyle is used to add some style to an HTML element Syntax: <element [ngStyle] = "typescript_property"> Approach: Create the Angular app to be usedIn app.component.html make an element and sets its class us 1 min read What is NgClass in Angular 10 ? In this article, we are going to see what is NgClass in Angular 10 and how to use it. NgClass is used to Add or remove CSS classes on an HTML element Syntax: <element [ngClass] = "typescript_property"> Approach: Create the angular app to be usedIn app.component.html make an element and sets i 1 min read What is entryComponents in angular ngModule ? The entryComponent is the component which loads angular by force, that means these components are not referenced in the HTML template. In most of the cases, Angular loads a component when it is explicitly declared in the component template. But this is not the case with entryComponents. The entryCom 3 min read Like