Learn advanced Angular: forms, reactive patterns, Angular Material, unit testing, and deployment.

Become an AngularJS Developer

This module teaches advanced Angular topics, focusing on forms, Angular Material, unit testing, and deploying apps.

We’ll start by learning how to collect user data with forms, using reactive patterns, and modifying forms dynamically. Next, we’ll learn reactive forms, handling groups, controls, and validation. We’ll also work with template forms, using two-way data binding and handling form submissions. Custom validators and async validation will enhance our forms.

We’ll set up authentication with Firebase and cover user registration and login. We’ll look at Angular Material and add UI controls, dialogs, and tables. Unit testing will teach us to test components, services, and forms.

Finally, we’ll learn to deploy Angular apps, optimize bundles, handle errors, and debug. Hands-on projects and challenges will reinforce your learning. By the end, we’ll be able to create robust, maintainable, and scalable Angular applications ready for production.

Angular Deep Dive

`<mat-button>I am an Angular Material button</mat-button>`

`<button mat-button>I am an Angular Material button</button>`

`<button><mat-button>I am an Angular Material button</mat-button></button>`

`<button mat-button>I am an Angular Material button</mat-button /button>`

If we want to use the `mat-button` from Angular Material library, then what is the correct syntax to create a button?

<p>If we want to use the <code>mat-button</code> from Angular Material library, then what is the correct syntax to create a button?</p>


**(Fill in the blank.)** When we add Angular Material to an Angular CLI project, then the ________ theme is the default one.

<p><strong>(Fill in the blank.)</strong> When we add Angular Material to an Angular CLI project, then the ________ theme is the default one.</p>


Which is _not_ a valid `button` type in Angular Material?

<p>Which is <em>not</em> a valid <code>button</code> type in Angular Material?</p>


```
<div>
  <mat-form-field>
    <input formControlName=“email” placeholder=“Email” required matInput />
    <error>Wrong email</error>
    <hint> Kindly enter a valid email. </hint>
  </mat-form-field>
</div>
```

```
<div>
  <mat-form-field>
    <input formControlName=“email” placeholder=“Email” required matInput />
    <mat-error>Wrong email</mat-error>
    <mat-hint> Kindly enter a valid email. </mat-hint>
  </mat-form-field>
</div>
```

```
<div>
  <mat-form-field>
    <mat-error>Wrong email</mat-error>
    <mat-hint> Kindly enter a valid email. </mat-hint>
  </mat-form-field>
</div>
```

```
<div>
  <mat-form-field>
    <input formControlName=“email” placeholder=“Email” required matInput error=“Wrong email” hint=“Kindly enter a valid email.“/>
  </mat-form-field>
</div>
```

Suppose we want to create a form with a text field for email in Angular Material. The input field should give the error of `Wrong email` in case the format of the email entered by the user is wrong. It should also provide the hint of `Kindly enter a valid email.` to the user. Which is the correct implementation?

<p>Suppose we want to create a form with a text field for email in Angular Material. The input field should give the error of <code>Wrong email</code> in case the format of the email entered by the user is wrong. It should also provide the hint of <code>Kindly enter a valid email.</code> to the user. Which is the correct implementation?</p>


```
<mat-list>
  <mat-list-item *ngFor=“let item of items”>
    {{item.name}}
  </mat-list-item>
</mat-list>
```

```
<mat-list>
  <mat-list-option *ngFor=“let item of items”>
    {{item.name}}
  </mat-list-option>
</mat-list>
```

```
<mat-selection-list>
  <mat-list-option *ngFor=“let item of items”>
    {{item.name}}
  </mat-list-option>
</mat-selection-list>
```

```
<mat-selection-list>
  <mat-list-item *ngFor=“let item of items”>
    {{item.name}}
  </mat-list-item>
</mat-selection-list>
```

If we want to create a list of checkboxes, then which syntax is correct?

<p>If we want to create a list of checkboxes, then which syntax is correct?</p>


Test your understanding of the essential concepts of Angular Material.

Collecting User Data with Forms

Reactive Forms

Template Forms

Custom Validators

Authentication

Introduction to Angular Material

Unit Test an Angular Application

Bringing an Application to Production

Handling Errors and Application Debugging

Appendix

Conclusion