Pipes in Angular are features that let us transform the data into some other format in the templates. For example, converting a number into a currency, or a value into a date, etc. In this article, we will learn how to concatenate pipe value in a string with the help of a code example.

Step 1: Initialising the project

Let’s create an angular project, and navigate into it with the below commands:

ng new angular-17
cd angular-17

Project Structure

Folder Structure

Dependencies

 "dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/router": "^18.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Step 2: Updating app.component.ts file to include a date value

In this step, we will create a new variable “currentDate” to store the date value, which we will then use in the template to format it into a date.

Filename: app.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, CommonModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css',
})
export class AppComponent {
    title = 'angular-17';

    currentDate = new Date();
}

Step 3: Using the currentDate in the template

In this step, we will use the above defined currentDate, format it into date using pipe symbol, and concatenate with a string to display in the template.

Filename: app.component.html

<p>{{ "The formatted date is: " + (currentDate | date : "longDate") }}</p>

Output

To run the application, use the below command:

ng serve

How To Concatenate Pipe Value in a Sting -Angular