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've created a form group, but for some reason, our app is no longer working. This is because, from the moment we registered the `ReactiveFormsModule`, Angular will expect every `<form>` element to be bound to a form group. In our template, we don't have any bindings. Angular will throw an error in the console as a result.

## Form binding

We can bind a form to an instance of the `FormGroup` class by binding the `formGroup` property on the `<form>` element. Let's update the template in the `app.component.html` file.

```html
<form class="card-body" [formGroup]="ccForm">
```

Make sure to wrap the `formGroup` attribute with square brackets to bind it to the instance of the `FormGroup` class that we have in the component class. After making this change, the error in the console will go away.

## Input binding

We have control over the form. The next step is to tell Angular to bind the controllers to the inputs. We can do so using the `formControlName` attribute. We have one controller in the group. We'll bind it to the input that accepts the cardholder's name in the `app.component.html` template file.

```html
<input type="text" class="form-control" formControlName="name">
```

We don't need to bind the property. The value for this attribute must be the name of the property holding the instance of the controller. 

One important thing to note is that the ancestor elements of the input you apply this attribute to must have the `formGroup` attribute. This is how Angular knows where to find the controller. It's also why we don't need to provide the full path to the controller. We've applied the `formGroup` attribute to the `<form>` element. It's already wrapped around the input, so we're good to go.

By binding the controller to the input, Angular will take care of storing and updating the property in the group. The class and input are now connected. 

## Logging the values

Everything is hooked up. Let's verify this by logging the values. In the template, we'll add the following below the `<form>` element:

# Form binding

We can bind a form to an instance of the `FormGroup` class by binding the `formGroup` property on the `<form>` element. Let's update the template in the `app.component.html` file.

```html
<form class="card-body" [formGroup]="ccForm">
```

Make sure to wrap the `formGroup` attribute with square brackets to bind it to the instance of the `FormGroup` class that we have in the component class. After making this change, the error in the console will go away.

# Input binding

We have control over the form. The next step is to tell Angular to bind the controllers to the inputs. We can do so using the `formControlName` attribute. We have one controller in the group. We'll bind it to the input that accepts the cardholder's name in the `app.component.html` template file.

```html
<input type="text" class="form-control" formControlName="name">
```

We don't need to bind the property. The value for this attribute must be the name of the property holding the instance of the controller. 

One important thing to note is that the ancestor elements of the input you apply this attribute to must have the `formGroup` attribute. This is how Angular knows where to find the controller. It's also why we don't need to provide the full path to the controller. We've applied the `formGroup` attribute to the `<form>` element. It's already wrapped around the input, so we're good to go.

By binding the controller to the input, Angular will take care of storing and updating the property in the group. The class and input are now connected. 

# Logging the values

Everything is hooked up. Let's verify this by logging the values. In the template, we'll add the following below the `<form>` element:

# Form binding

We can bind a form to an instance of the `FormGroup` class by binding the `formGroup` property on the `<form>` element. Let's update the template in the `app.component.html` file.

```html
<form [formGroup]="ccForm">
```

Make sure to wrap the `formGroup` attribute with square brackets to bind it to the instance of the `FormGroup` class that we have in the component class. After making this change, the error in the console will go away.

# Input binding

We have control over the form. The next step is to tell Angular to bind the controllers to the inputs. We can do so using the `formControlName` attribute. We have one controller in the group. We'll bind it to the input that accepts the cardholder's name in the `app.component.html` template file.

```html
<input type="text" formControlName="name">
```

We don't need to bind the property. The value for this attribute must be the name of the property holding the instance of the controller. 

One important thing to note is that the ancestor elements of the input you apply this attribute to must have the `formGroup` attribute. This is how Angular knows where to find the controller. It's also why we don't need to provide the full path to the controller. We've applied the `formGroup` attribute to the `<form>` element. It's already wrapped around the input, so we're good to go.

By binding the controller to the input, Angular will take care of storing and updating the property in the group. The class and input are now connected. 

# Logging the values

Everything is hooked up. Let's verify this by logging the values. In the template, we'll add the following below the `<form>` element:

In this lesson, we'll learn how to bind the form to the form group in the class.

First Steps

Our First Project

Component Basics

Pipes

Directives

Modules

Routing

Advanced Components

Services

RxJS

Reactive Forms

Template Forms

Custom Validators

Authentication

Conclusion

Binding a Form

Form binding