Angular2 Refresher

Watch User Created Playlist (11)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Build Select Dropdowns for Angular 2 Forms

P

Use RxJS Streams with Angular 2 Forms

P

Style Validation in Angular 2 Forms

P

Create and Submit an Angular 2 Form using ngForm

P

Check ngModel Validation in Angular 2

P

Create a Basic Angular 2 ngModel Input

Display Validation and Error Messaging in Angular 2

P

Group Inputs in Angular 2 Forms with ngModelGroup

P

Understand the Angular 2 States of Inputs: Pristine and Untouched

P

Create Radio Buttons for Angular 2 Forms

P

Create an Angular 2 Hello World Component

angular tutorial about Build Select Dropdowns for Angular 2 Forms

Build Select Dropdowns for Angular 2 Forms

1:10 angular PRO

Select Dropdowns in Angular 2 a built with select and option elements. You use *ngFor to loop through your values and create options and use ngModel to keep track of the value as it changes.

angular tutorial about Use RxJS Streams with Angular 2 Forms

Use RxJS Streams with Angular 2 Forms

3:05 angular PRO

Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the values of the form when the form is valid.

angular tutorial about Style Validation in Angular 2 Forms

Style Validation in Angular 2 Forms

1:11 angular PRO

Inputs using Angular 2’s ngModel automatically apply style classes of .ng-valid and .ng-invalid each time the input’s validity changes. These classes allow you easily add your own styles simply by declaring the styles in your Component decorator.

angular tutorial about Create and Submit an Angular 2 Form using ngForm

Create and Submit an Angular 2 Form using ngForm

2:41 angular PRO

Forms in Angular 2 are essentially wrappers around inputs that group the input values together into an object and also check that all the inputs are valid. Angular 2 ‘s ngForm allows you to get a reference to that object and validity and use them to display information about the form or use the ngSubmit event to save information from the form.

angular tutorial about Check ngModel Validation in Angular 2

Check ngModel Validation in Angular 2

0:55 angular PRO

Checking the validity of an Angular 2 input using ngModel is simply a matter of getting a reference to the ngModel itself. You get the reference by using the #ref syntax, assigning it a name, then ngModel will check all of the validity rules for you.

angular tutorial about Create a Basic Angular 2 ngModel Input

Create a Basic Angular 2 ngModel Input

1:39 angular

ngModel is a very powerful feature of Angular 2, but it isn’t enabled by default. You need to import the Angular 2 FormsModule and use the proper syntax around the ngModel directive to enable the features (such as automatically updating from an ngModel) that you would expect.

This lesson starts with a Angular 2 hello world app. To quickly set that up use the angular cli which will set up the boilerplate needed to get started.

angular tutorial about Display Validation and Error Messaging in Angular 2

Display Validation and Error Messaging in Angular 2

2:59 angular PRO

Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access these errors from a reference to the ngModel itself then build useful messaging around them to display to your users.

angular tutorial about Group Inputs in Angular 2 Forms with ngModelGroup

Group Inputs in Angular 2 Forms with ngModelGroup

1:51 angular PRO

The ngModelGroup directive allows you to group together related inputs so that you structure the object represented by the form in a useful and predictable way. ngModelGroup is often used in combination with fieldset as they mostly represent the same idea of “grouping together inputs.”

angular tutorial about Understand the Angular 2 States of Inputs: Pristine and Untouched

Understand the Angular 2 States of Inputs: Pristine and Untouched

1:44 angular PRO

Angular 2’s ngModel exposes more than just validity, it even gives you the states of whether the input has been “touched” or changed. This lesson explains and compares those states so you can use them to make complex validity requirements.

angular tutorial about Create Radio Buttons for Angular 2 Forms

Create Radio Buttons for Angular 2 Forms

5:48 angular PRO

Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels will match up with each input. This lesson shows how to use *ngFor with radio buttons and covers the quirks of the id property and for attributes as well as how to style validation of radio buttons.

angular tutorial about Create an Angular 2 Hello World Component

Create an Angular 2 Hello World Component

2:32 angular

A Hello World application in Angular 2 requires you to understand concepts around bootstrapping, modules, and components. The bootstrapping system allows you to decide which module and platform you’ll use when your app starts up as well as which components should be shown first. The Angular 2 modules define which features you’ll want to include so you can have fine control over your final project size. The Angular 2 Components then become a simple definition of a template with variables.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?