Angular

14 Notes
+ AsyncSubject (Oct. 27, 2019, 5:37 p.m.)

AsyncSubject This is very different from the others. With AsyncSubject, you’re only wanting the very last value as the subject completes. Figure that we have a bunch of values that can be sent out potentially, but you’re only interested in the most up to date value. AsyncSubject emits the last value and only the last value to subscribers when the sequence of data that’s being sent out is actually completed. ----------------------------------------------------------- While the BehaviorSubject and ReplaySubject both store values, the AsyncSubject works a bit different. The AsyncSubject is aSubject variant where only the last value of the Observable execution is sent to its subscribers, and only when the execution completes. -----------------------------------------------------------

+ ReplaySubject (Oct. 27, 2019, 5:34 p.m.)

ReplaySubject: As BehaviorSubject, ReplaySubject can also replay the last value that was sent out to any new subscribers. The difference is it can also replay all of the previous values if you like. You can think of this as kind of caching any data that’s been sent out so that any other components that subscribe still can get that data. With ReplaySubject we can replay everything that was previously sent. ----------------------------------------------------------- The ReplaySubject is comparable to the BehaviorSubject in the way that it can send “old” values to new subscribers. It however has the extra characteristic that it can record a part of the observable execution and therefore store multiple old values and “replay” them to new subscribers. ----------------------------------------------------------- When creating the ReplaySubject you can specify how much values you want to store and for how long you want to store them. In other words you can specify: “I want to store the last 5 values, that have been executed in the last second prior to a new subscription”. -----------------------------------------------------------

+ BehaviorSubject (Oct. 27, 2019, 5:30 p.m.)

BehaviorSubject: BehaviorSubject is very similar to Subject, except that it has one big feature that Subject doesn’t have. The ability for subscribers that come in later in the flow to still get some of the previous data. BehaviorSubject allows you send the last piece of data to any new observers, any new subscribers. In that way they can still stay in sync. They’re not going to have all the previous values, but at least they have the latest value. ----------------------------------------------------------- The BehaviorSubject has the characteristic that it stores the “current” value. This means that you can always directly get the last emitted value from the BehaviorSubject. ----------------------------------------------------------- There are two ways to get this last emited value. You can either get the value by accessing the .value property on the BehaviorSubject or you can subscribe to it. If you subscribe to it, the BehaviorSubject will directly emit the current value to the subscriber. Even if the subscriber subscribes much later than the value was stored. -----------------------------------------------------------

+ RxJS (ReactiveX) (Oct. 27, 2019, 5:18 p.m.)

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc) to allow handling asynchronous events as collections. ReactiveX combines the Observer pattern with the Iterator pattern and functional programming with collections to fill the need for an ideal way of managing sequences of events. -------------------------------------------------------- The essential concepts in RxJS which solve async event management are: - Observable: represents the idea of an invokable collection of future values or events. - Observer: is a collection of callbacks that knows how to listen to values delivered by the Observable. - Subscription: represents the execution of an Observable, is primarily useful for cancelling the execution. - Operators: are pure functions that enable a functional programming style of dealing with collections with operations like map, filter, concat, flatMap, etc. - Subject: is the equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers. - Schedulers: are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others. -------------------------------------------------------- Examples: Normally you register event listeners. var button = document.querySelector('button'); button.addEventListener('click', () => console.log('Clicked!')); Using RxJS you create an observable instead. var button = document.querySelector('button'); Rx.Observable.fromEvent(button, 'click') .subscribe(() => console.log('Clicked!')); --------------------------------------------------------

+ Subjects (Oct. 27, 2019, 12:22 p.m.)

Subject provides a way to send one or more data values to listeners. With Subject we send data to subscribed observers, but any previously emitted data is not going to be sent as you subscribed later. You’re only going to get the data that occurs after you’ve subscribed. ----------------------------------------------------------- A Subject is like an Observable. It can be subscribed to, just like you normally would with Observables. It also has methods like next(), error() and complete() just like the observer you normally pass to your Observable creation function. The main reason to use Subjects is to multicast. An Observable by default is unicast. Unicasting means that each subscribed observer owns an independent execution of the Observable. ----------------------------------------------------------- Subjects are used for multicasting Observables. This means that Subjects will make sure each subscription gets the exact same value as the Observable execution is shared among the subscribers. You can do this using the Subject class. But rxjs offers different types of Subjects, namely: BehaviorSubject, ReplaySubject and AsyncSubject. ----------------------------------------------------------- import * as Rx from "rxjs"; const observable = Rx.Observable.create((observer) => { observer.next(Math.random()); }); // subscription 1 observable.subscribe((data) => { console.log(data); // 0.24957144215097515 (random number) }); // subscription 2 observable.subscribe((data) => { console.log(data); // 0.004617340049055896 (random number) }); ----------------------------------------------------------- How to use Subjects to multicast: Multicasting is a characteristic of a Subject. You don’t have to do anything special to achieve this behaviour. import * as Rx from "rxjs"; const subject = new Rx.Subject(); // subscriber 1 subject.subscribe((data) => { console.log(data); // 0.24957144215097515 (random number) }); // subscriber 2 subject.subscribe((data) => { console.log(data); // 0.24957144215097515 (random number) }); subject.next(Math.random()); -----------------------------------------------------------

+ Observables (Oct. 27, 2019, 12:29 p.m.)

Angular uses observables extensively in the event system and the HTTP service. Observables provide the support for passing the messages between publishers (Creator of Observables) and subscribers (User of Observables) in your application. Observables are declarative, that is, you define the function for publishing values, but it is not executed until the consumer subscribes to it. ------------------------------------------------------- Define Angular Observers: The handler for receiving the observable notifications implements the Observer interface. It is an object that defines the callback methods to handle the three types of notifications that an observable can send. These are the following. - next: Required. The handler for each delivered value called zero or more times after execution starts. - error: Optional. The handler for error notification. The error halts the execution of the observable instance. - complete: Optional. The handler for an execution-complete notification. The delayed values can continue to be delivered to a next handler after execution is complete. -------------------------------------------------------

+ ECMAScript(ES) (Oct. 27, 2019, 12:26 p.m.)

ECMAScript is a simple standard for JavaScript and adding new features to JavaScript. ECMAScript is a subset of JavaScript. JavaScript is basically ECMAScript at its core but builds upon it. Languages such as ActionScript, JavaScript, JScript all use ECMAScript as its core As a comparison, AS/JS/JScript are 3 different cars, but they all use the same engine… each of their exteriors is different though, and there have been several modifications done to each to make it unique.

+ Sort array of objects (Oct. 6, 2019, 7:56 a.m.)

this.menus.sort((obj1, obj2) => { return obj1.ordering - obj2.ordering; });

+ Forms (Oct. 2, 2019, 10:22 p.m.)

Angular provides two different approaches for managing the forms: 1- Reactive approach (or Model-driven forms) 2-Template-driven approach ------------------------------------------------------------------------ Both reactive and template-driven forms share underlying common building blocks which are the following. 1- FormControl: It tracks the value and validation status of the individual form control. 2- FormGroup: It tracks the same values and status for the collection of form controls. 3- FormArray: It tracks the same values and status for the array of the form controls. 4- ControlValueAccessor: It creates the bridge between Angular FormControl instances and native DOM elements. ------------------------------------------------------------------------ Reactive forms: Reactive forms or Model-driven forms are more robust, scalable, reusable, and testable. If forms are the key part of your application, or you’re already using reactive patterns for building your web application, use reactive forms. In Reactive Forms, most of the work is done in the component class. ------------------------------------------------------------------------ Template-driven forms: Template-driven forms are useful for adding the simple form to an app, such as the email list signup form. They’re easy to add to a web app, but they don’t scale as well as the reactive forms. If you have the fundamental form requirements and logic that can be managed solely in the template, use template-driven forms. In template-driven forms, most of the work is done in the template. ------------------------------------------------------------------------ FormControl: It tracks the value and validity status of an angular form control. It matches to an HTML form control like an input. this.username = new FormControl('agustin', Validators.required); ------------------------------------------------------------------------ FormGroup: It tracks the value and validity state of a FormBuilder instance group. It aggregates the values of each child FormControl into one object, using the name of each form control as the key. It calculates its status by reducing the statuses of its children. If one of the controls inside a group is invalid, the entire group becomes invalid. this.user_data = new FormGroup({ username: new FormControl('agustin', Validators.required), city: new FormControl('Montevideo', Validators.required) }); ------------------------------------------------------------------------ FormArray: It is a variation of FormGroup. The main difference is that its data gets serialized as an array, as opposed to being serialized as an object in case of FormGroup. This might be especially useful when you don’t know how many controls will be present within the group, like in dynamic forms. this.user_data = new FormArray({ new FormControl('agustin', Validators.required), new FormControl('Montevideo', Validators.required) }); ------------------------------------------------------------------------ FormBuilder: It is a helper class that creates FormGroup, FormControl and FormArray instances for us. It basically reduces the repetition and clutter by handling details of form control creation for you. this.validations_form = this.formBuilder.group({ username: new FormControl('', Validators.required), email: new FormControl('', Validators.compose([ Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$') ])) }); ------------------------------------------------------------------------

+ Material Design (Aug. 31, 2019, 8:24 a.m.)

ng add @angular/material ------------------------------------------------------------------------- https://material.angular.io/guide/getting-started Colors: https://material.io/archive/guidelines/style/color.html#color-color-system Using a pre-built theme: https://material.angular.io/guide/theming Material Design Icons: https://google.github.io/material-design-icons/

+ Libraries / Packages (Aug. 31, 2019, 2:12 a.m.)

Bootstrap: npm install bootstrap jquery popper.js Material Design: npm install --save @angular/material @angular/cdk @angular/animations @angular/flex-layout material-design-icons hammerjs Misc: npm install rxjs-compat --save npm install ng2-slim-loading-bar @angular/core --save

+ Angular Releases (Aug. 31, 2019, 12:45 a.m.)

https://angular.io/guide/releases#support-policy-and-schedule

+ CLI commands (June 28, 2019, 6:09 p.m.)

Display list of available commands: ng ng new project_name ng --version npm install bootstrap jquery popper.js --save ng serve -o ng serve --watch ng g c product-add --skipTests=true ng build --prod

+ Install / Update Angular CLI (June 28, 2019, 6:03 p.m.)

Angular CLI helps us to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. First, install Nodejs using my Nodejs notes, then: sudo npm install -g @angular/cli