Designing and Architecting Web Applications

TypeScript for Angular Developers

This module will teach you step-by-step how to design and architect large Angular applications.

You’ll start with the basics: components, pipes, and directives. These are the building blocks of any Angular application, so you will get plenty of hands-on practice with this material. Next, you’ll ramp things up by stepping into modules, routing, and RXJS, where you’ll learn how to declaratively manage data and dive deep into observables.

In the latter half of the module, you’ll cover reactive and template forms (crucial for handling user data), as well as custom validators and setting up authentication with Firebase.

By the end of this module, you'll be able to design large, scalable applications, be able to develop rich interactive components, and you’ll really understand how Angular works under the hood.

Angular: Designing and Architecting Web Applications

We'll be exploring two pipes in this lesson: the currency pipe, and the decimal pipe. Both are used for formatting numeric values.

## Currency pipe

The `currency` pipe will format a number by adding a currency symbol before it and adding decimal values if necessary. In the `app.component.ts` component class file, we'll add a property called `cost`.

```typescript
export class AppComponent {
 name = 'john doe';
 todaysDate = new Date();
 cost = 2000;
}
```

This will hold the cost of some imaginary product. We can update the `app.component.html` template to output the price with the correct currency symbol.

```html
{{ cost | currency }}
```

This will output the following:

```html
$2,000.00
```

You may see a different currency because the `currency` pipe will check the OS and language of your system. It will attempt to output the currency associated with your region.

As you can see, the `currency` pipe was able to add the correct currency symbol, add a comma, and add a decimal value. 

### Switching currencies

The `currency` pipe has a parameter for changing the currency. The documentation for the `currency` pipe states that we can use an ISO 4217 code. Here's a list of valid codes: [https://en.wikipedia.org/wiki/ISO_4217](https://en.wikipedia.org/wiki/ISO_4217).

Let's say we want to switch the currency to the Japanese Yen; we can update the expression to the following:

```html
{{ cost | currency: 'JPY' }}
```

This will output the following:

```html
¥2,000
```

Perfect! One thing to keep in mind is that the `currency` pipe will not perform a conversion on your value. It will merely format it. It's essential to perform a currency conversion before outputting it. 2000 Yen is not equal to 2000 USD. 

## Decimal pipe

The next pipe we'll look at is the `DecimalPipe`. It's very similar to the `CurrencyPipe` because it deals with numeric values. We can use it to help format numbers by adding/removing decimal values. 

For example, let's say we want to output the temperature. Sometimes we may need to calculate the temperature, which may result in a decimal value. Typically, it's not common to output the temperature with a decimal value. We want to strip it out if that's the case.

In the `app.component.ts` component class file, we'll add a property called `temperature`.

```typescript
export class AppComponent {
 name = 'john doe';
 todaysDate = new Date();
 cost = 2000;
 temperature = 25.3;
}
```

We want to remove the `.3` from the value. We can do this in JavaScript, but, for demonstration purposes, we'll look at how to remove it with the `DecimalPipe`.

In the `app.component.html` template, we'll add the following:

```html
{{ temperature | number: '1.0-0' }}
```

This will output the following:

```html
25
```

The `number` pipe has a parameter, which is the format for the number. On the left side of the `dot` is the minimum number of digits that should be present in the number. For example, let's say we updated the parameter to `5.0-0`; the output will be the following:

```html
00,025
```

The `number` pipe will add 0's to the number because there are less than five digits in the number. 

To the right of the dot, we can set the minimum and the maximum number of digits for the decimal value, respectively. In our example, we're saying the number can't have any decimal values. The `number` pipe will strip out any decimal values present in the number. 

Let's say we updated the parameter to `1.2-5` This will tell the `number` pipe to output a decimal value with *at least* two digits. If the value has more than five digits for the decimal value, they will be stripped out. 

For example, if we had the `temperature` property set to `25.123456`, then the output would be the following:

```html
25.12345
```

The goal for this part of the lesson was to output the temperature without decimal values, so we'll revert the parameter to `1.0-0`. 

Here's the completed code for this lesson:

We'll be exploring two pipes in this lesson: the currency pipe, and the decimal pipe. Both are used for formatting numeric values.

# Currency pipe

The `currency` pipe will format a number by adding a currency symbol before it and adding decimal values if necessary. In the `app.component.ts` component class file, we'll add a property called `cost`.

```typescript
export class AppComponent {
 name = 'john doe';
 todaysDate = new Date();
 cost = 2000;
}
```

This will hold the cost of some imaginary product. We can update the `app.component.html` template to output the price with the correct currency symbol.

```html
{{ cost | currency }}
```

This will output the following:

```html
$2,000.00
```

You may see a different currency because the `currency` pipe will check the OS and language of your system. It will attempt to output the currency associated with your region.

As you can see, the `currency` pipe was able to add the correct currency symbol, add a comma, and add a decimal value. 

## Switching currencies

The `currency` pipe has a parameter for changing the currency. The documentation for the `currency` pipe states that we can use an ISO 4217 code. Here's a list of valid codes: [https://en.wikipedia.org/wiki/ISO_4217](https://en.wikipedia.org/wiki/ISO_4217).

Let's say we want to switch the currency to the Japanese Yen; we can update the expression to the following:

```html
{{ cost | currency: 'JPY' }}
```

This will output the following:

```html
¥2,000
```

Perfect! One thing to keep in mind is that the `currency` pipe will not perform a conversion on your value. It will merely format it. It's essential to perform a currency conversion before outputting it. 2000 Yen is not equal to 2000 USD. 

# Decimal pipe

The next pipe we'll look at is the `DecimalPipe`. It's very similar to the `CurrencyPipe` because it deals with numeric values. We can use it to help format numbers by adding/removing decimal values. 

For example, let's say we want to output the temperature. Sometimes we may need to calculate the temperature, which may result in a decimal value. Typically, it's not common to output the temperature with a decimal value. We want to strip it out if that's the case.

In the `app.component.ts` component class file, we'll add a property called `temperature`.

```typescript
export class AppComponent {
 name = 'john doe';
 todaysDate = new Date();
 cost = 2000;
 temperature = 25.3;
}
```

We want to remove the `.3` from the value. We can do this in JavaScript, but, for demonstration purposes, we'll look at how to remove it with the `DecimalPipe`.

In the `app.component.html` template, we'll add the following:

```html
{{ temperature | number: '1.0-0' }}
```

This will output the following:

```html
25
```

The `number` pipe has a parameter, which is the format for the number. On the left side of the `dot` is the minimum number of digits that should be present in the number. For example, let's say we updated the parameter to `5.0-0`; the output will be the following:

```html
00,025
```

The `number` pipe will add 0's to the number because there are less than five digits in the number. 

To the right of the dot, we can set the minimum and the maximum number of digits for the decimal value, respectively. In our example, we're saying the number can't have any decimal values. The `number` pipe will strip out any decimal values present in the number. 

Let's say we updated the parameter to `1.2-5` This will tell the `number` pipe to output a decimal value with *at least* two digits. If the value has more than five digits for the decimal value, they will be stripped out. 

For example, if we had the `temperature` property set to `25.123456`, then the output would be the following:

```html
25.12345
```

The goal for this part of the lesson was to output the temperature without decimal values, so we'll revert the parameter to `1.0-0`. 

Here's the completed code for this lesson:

We'll learn how to use the currency pipe and decimal pipe in this lesson.

Before We Begin

Our First Project

Component Basics

Pipes

Directives

Modules

Routing

Advanced Components

Services

RxJS

Reactive Forms

Template Forms

Custom Validators

Authentication

Conclusion

Currency Pipe and Decimal Pipe

Currency pipe