Introduction to "@angular/common@11.2.1 node_modules @angular/common @angular common@"11.2.1"

@angular/common is a package in the Angular framework that provides common functionality required by the Angular applications. It includes directives like NgIf, NgFor, pipes like DatePipe, and services like Location.

In this article, we will explore the @angular/common@11.2.1 module. We will look into what it provides, and how to use it in your Angular application.

Installing @angular/common@11.2.1

@angular/common@11.2.1 is a version of @angular/common package. To install it, we need to run the following npm command in our Angular project:

npm install @angular/common@11.2.1

Using @angular/common@11.2.1

Once we have installed @angular/common@11.2.1, we can use its various components like directives, pipes, and services in our Angular application.

Directives

@angular/common@11.2.1 provides various directives that we can use in our Angular templates. These directives include:

• NgIf: A structural directive that allows us to conditionally render a part of the DOM based on a condition.
• NgForOf: A structural directive that lets us loop over a collection of items and render them in the DOM.
• NgSwitch: A structural directive that lets us conditionally render a part of the DOM based on a value.
• NgSwitchCase: A directive that is used with NgSwitch to define the value to match against.

Here is an example of using the NgIf directive:

<div *ngIf="showText">
  Some text that is only shown when showText is true.
</div>

Pipes

@angular/common@11.2.1 provides various pipes that we can use to format data in our Angular application. These pipes include:

• DatePipe: A pipe that formats a date object into a string based on a specified format.
• UpperCasePipe: A pipe that converts the input string to uppercase.
• LowerCasePipe: A pipe that converts the input string to lowercase.

Here is an example of using the DatePipe pipe:

<p>The current date is {{ currentDate | date:"dd MMMM yyyy" }}</p>

Services

@angular/common@11.2.1 also provides various services that we can use in our Angular application. These services include:

• Location: A service that provides information about the URL and allows us to manipulate it.
• PlatformLocation: A service that provides information about the platform, such as whether it is browser or server-side rendering.
• HashLocationStrategy: A service that uses the URL hash to represent the application state.
• PathLocationStrategy: A service that uses the URL path to represent the application state.

Here is an example of using the Location service:

import { Component } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private location: Location) {}

  goBack(): void {
    this.location.back();
  }
}

Conclusion

@angular/common@11.2.1 is a powerful package that provides various common functionalities required by Angular applications. We can use its directives, pipes, and services to make our code cleaner and more maintainable.