How to Concatenate Pipe Values in a String in Angular?
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
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
