fbAPIKey

fbAuthDomain

fbDBUrl

fbProjectId

fbStorageBucket

fbSenderId

Gain insights into designing scalable Angular applications. Learn about components, directives, routing, RXJS, forms, and Firebase authentication to develop rich, interactive web solutions.

Angular Designing and Architecting Web Applications.png

angular-starter-v5.tar.gz

Angular

Angular Install Dependencies

Angular with Relaunch

This course 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 course, 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 course, 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 look at another pipe defined by Angular called the `DatePipe`. The `DatePipe` will help you format dates into various formats. It's a versatile pipe because we have the freedom to use different formats. 

The `DatePipe` requires the date to be a `Date()` object, time in milliseconds from 1970, or an ISO string. We must make sure the value is in the required format before we use the `DatePipe`. Otherwise, it won't work.

In the `app.component.ts` file, we'll create a property called `todaysDate`. Its value will be a new instance of the `Date` object.

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

In the `app.component.html` template, we'll add a `` tag with the following content:

```html
{{ todaysDate | date }}
```

By default, this will output the following:

```
Apr 26, 2020
```

The output may be slightly different because the `date` pipe reacts differently based on your environment or when you're taking this course.

# Using pipe parameters

By itself, the `DatePipe` is capable of formatting the date without our help. It was able to understand the current date because we provided it with an instance of the `Date` object. 

In some cases, we may want the date in a specific format. Since **pipes are functions**, they have parameters for modifying the behavior of the function. Parameters can be added by adding a colon after the name of the pipe, followed by the value. 

The `date` pipe's parameter is the format we wish to use for the date. On the documentation page for the `date` pipe, there's a section called **Custom format options**. Here's a link to the page: [https://angular.io/api/common/DatePipe#custom-format-options](https://angular.io/api/common/DatePipe#custom-format-options).

Under the `format` column, we can use the characters as placeholders for the actual value. The `date` pipe will take care of replacing the placeholders with the appropriate value. For example, let's say we want to output only the month and day. We could update the pipe in the template to the following:

```html
{{ todaysDate | date: 'MMMM d' }}
```

This will output the following:

```
April 26
```

This may be different for some of you, depending on when you're taking this course.

# Predefined date formats

One last thing, in the documentation for the `date` pipe, there's a section called **Predefined format options**. If you don't feel like setting the format yourself, you can use a predefined set of format options. For example, let's say we want to use the `short` format. We could update the expression to the following:

```html
{{ todaysDate | date: 'short' }}
```

The pipe will still be able to transform the output even though we're not passing in a format with placeholders. It will notice we want to use one of its inner predefined format options.

For this course, we'll stick to manually formatting the date ourselves. Here's the updated code:

We'll learn how to use pipe parameters in this lesson.

First Steps

Our First Project

Component Basics

Pipes

Directives

Modules

Routing

Advanced Components

Services

RxJS

Reactive Forms

Template Forms

Custom Validators

Authentication

Conclusion

Pipe Parameters