Built-in Pipes in Angular 🎯

Welcome to our deep dive into Angular's built-in pipes! In this lesson, we'll explore various built-in pipes that will help us format data for our applications, making them more user-friendly. Let's get started!

Understanding Pipes in Angular 📝

Pipes in Angular are used to transform data in your templates. They let you format, filter, and manipulate data before displaying it to the user. Angular comes with a bunch of built-in pipes, and we'll learn about some of the most commonly used ones.

Date Pipe 💡

The date pipe is used to format dates. It can convert JavaScript dates into human-readable strings, such as converting a date object into a string like "2022-04-01".

typescript

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

@Component({
  selector: 'app-root',
  template: `
    <p>
      Today's date is: {{ today | date }}
    </p>
  `
})
export class AppComponent {
  today = new Date();
}

In the example above, we're using the date pipe to format the current date. The | symbol is used to apply pipes in Angular templates.

Quiz 📝

Quick Quiz

Question 1 of 1

What does the date pipe do in Angular?

Currency Pipe 💡

The currency pipe is used to format numbers as currency. It can convert numbers into strings that represent a specific currency, such as converting the number 100 into "$100.00" for USD.

typescript

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

@Component({
  selector: 'app-root',
  template: `
    <p>
      The price is: {{ price | currency }}
    </p>
  `
})
export class AppComponent {
  price = 100;
}

In the example above, we're using the currency pipe to format a price. By default, Angular uses the current locale to determine the currency symbol.

Quiz 📝

Quick Quiz

Question 1 of 1

What does the currency pipe do in Angular?

Percent Pipe 💡

The percent pipe is used to format numbers as a percentage. It multiplies the number by 100 and appends a percentage symbol (%).

typescript

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

@Component({
  selector: 'app-root',
  template: `
    <p>
      The discount is: {{ discount | percent }}
    </p>
  `
})
export class AppComponent {
  discount = 0.25;
}

In the example above, we're using the percent pipe to format a discount as a percentage.

Quiz 📝

Quick Quiz

Question 1 of 1

What does the percent pipe do in Angular?

That's it for our deep dive into Angular's built-in pipes! As you can see, they're a powerful tool for formatting data in your Angular applications. Happy coding! 🚀