Web #8

JavaScript – more features

• Promise – MDN link
• JQuery promise deferrd – MDN link
• Promise – es6-features.org
• Promise.all – es6-features.org
• function* – MDN link

ng-class

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

The directive operates in three different ways, depending on which of three types the expression evaluates to:

1. If the expression evaluates to a string, the string should be one or more space-delimited class names.
2. If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.
3. If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this.

The directive won’t add duplicate classes if a particular class was already set.

When the expression changes, the previously added classes are removed and only then are the new classes added … full article

ng-model

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

ngModel is responsible for:

• Binding the view into the model, which other directives such as input, textarea or select require.
• Providing validation behavior (i.e. required, number, email, url).
• Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).
• Setting related css classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty) including animations.
• Registering the control with its parent form.

Note: ngModel will try to bind to the property given by evaluating the expression on the current scope. If the property doesn’t already exist on this scope, it will be created implicitly and added to the scope … full article

More topics covered:

• IEnumerable
• iterators and generators
• JQuery – fail vs catch
• promise – resolve and reject
• promise return –> then
• creating our own promises
• angular drop-down ng-model
• angular checkbox ng-model

Links:

• Class code: 17.08.2020 code
• Class code: promise
• Class code: iterators
• Class code: ng-class
• Class code: ng-model
• Lesson Summary Video!