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

**(Fill in the blank.)** While test-driven development is beneficial for ensuring code quality and maintenance over time, not everybody undertakes ________ in the daily development workflow.

(Fill in the blank.) While test-driven development is beneficial for ensuring code quality and maintenance over time, not everybody undertakes ________ in the daily development workflow.

We are verifying if the `AppComponent` is a `TestBed`.

We are verifying if we can create a new instance of `AppComponent` using the `createComponent` method.

We are creating a `TestBed` instance of `AppComponent`.

We are verifying if the `fixture` and `app` instance are the same.

Suppose we have the test case below. What is the purpose of this unit test?
```
it(‘should create the app’, () => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.componentInstance;
  expect(app).toBeTruthy();
});
```

Suppose we have the test case below. What is the purpose of this unit test?
<pre><code>it(‘should create the app’, () =&gt; {
 const fixture = TestBed.createComponent(AppComponent);
 const app = fixture.componentInstance;
 expect(app).toBeTruthy();
});
</code></pre>

Which are the two artifacts provided by Angular testing utilities to tackle asynchronous testing scenarios?

Which are the two artifacts provided by Angular testing utilities to tackle asynchronous testing scenarios?

```
it(‘should emit the liked event’, () => {
  const button = nativeElement.querySelector(‘button’);
  button.click();
  expect(component.isFavorite).toBeTrue();
});
```

```
it(‘should emit the liked event’, () => {
  const button: HTMLButtonElement = fixture.nativeElement.querySelector(‘button’);
  button.click();
  expect(component.isFavorite).toBeTrue();
});
```

```
it(‘should emit the liked event using debugElement’, () => {
  const buttonDe = fixture.debugElement.query(By.css(‘button’));
  buttonDe.triggerEventHandler(‘click’);
  expect(component.isFavorite).toBeTrue();
});
```

```
it(‘should emit the liked event’, () => {
  const button: HTMLButtonElement = fixture.search(‘button’);
  button.click();
  expect(component.isFavorite).True();
});
```

Suppose we want to create a unit test to check whether the `isFavorite` property is wired up correctly with the `liked` output event. We want to use the `nativeElement` property of `ComponentFixture` and then click it for the output event to emit. Which is the correct approach?

Suppose we want to create a unit test to check whether the <code>isFavorite</code> property is wired up correctly with the <code>liked</code> output event. We want to use the <code>nativeElement</code> property of <code>ComponentFixture</code> and then click it for the output event to emit. Which is the correct approach?

```
describe(‘ListPipe’, () => {
  it(‘should return an array’, () => {
    const pipe = new ListPipe();
    expect(pipe.transform(‘this:is:great’)).toEqual([‘this’, ‘is’, ‘great’]);
  });
});
```

```
it(‘should return an array’, () => {
    const pipe = new ListPipe();
    expect(pipe.transform(‘this:is:great’)).toEqual([‘this’, ‘is’, ‘great’]);
});
```

```
describe(‘ListPipe’, () => {
  it(‘should return an array’, () => {
    expect(pipe.transform(‘this:is:great’)).toEqual([‘this’, ‘is’, ‘great’]);
  });
});
```

```
describe(‘ListPipe’, () => {
  it(‘should return an array’, () => {
    const pipe = new pipe.transform(‘this:is:great’).toEqual([‘this’, ‘is’, ‘great’]);
  });
});
```

Suppose we have the pipe below that converts a `:` separated string into a list. We want to test the pipe with mock data. Which is the correct approach?

```
@Pipe({
  name: ‘list’
})
export class ListPipe implements PipeTransform {
  transform(value: string): string[] {
    return value.split(‘:’);
  }
}
```

Suppose we have the pipe below that converts a <code>:</code> separated string into a list. We want to test the pipe with mock data. Which is the correct approach?
<pre><code>@Pipe({
 name: ‘list’
})
export class ListPipe implements PipeTransform {
 transform(value: string): string[] {
 return value.split(‘:’);
 }
}
</code></pre>

Test your understanding of the essential concepts regarding unit testing an Angular application.

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