Angular - Hot & Cold Observables

Cold and Hot Observables: 

When the data is produced by the Observable itself, we call it a cold Observable.  For example, observables created using the of, from, range, interval and timer operators will be cold.

import * as Rx from "rxjs";

const random = Math.random()

const observable = Rx.Observable.create((observer) => {

    observer.next(random);

});

// subscription 1

observable.subscribe((data) => {

  console.log(data); // 0.11208711666917925 (random number)

});

// subscription 2

observable.subscribe((data) => {

   console.log(data); // 0.11208711666917925 (random number)

});

Hot observables, on other hand, have their data producer outside the observable itself. These observables are closing over external data producers. For example, observables created with the fromEvent operator for either user events (clicks, mouse moves,…) or WebSocket events are hot observables. The data is being produced regardless of if there’s a subscriber or not. If there’s no subscriber when the data is being produced, the data is simply lost.

import * as Rx from "rxjs";

const observable = Rx.Observable.fromEvent(document, 'click');

// subscription 1

observable.subscribe((event) => {

  console.log(event.clientX); // x position of click

});

// subscription 2

observable.subscribe((event) => {

   console.log(event.clientY); // y position of click

});

Arrow Functions

Arrow functions allows a short syntax for writing function expressions.

You don't need the function keyword, the return keyword, and the curly brackets.

Let and Const are blocked scope variables in ES6.

Angular 2 - 7.x

TypeScript is a strongly typed, object oriented, compiled language. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. 

Main.ts vs public_api.ts

       Like the main.ts entry of an application, a library usually has a public_api.ts 

CanDeactivate:

       CanDeactivate guard which is usually used to warn people if they are navigating away from a page where they have some unsaved changes.

CanActivate:

   CanActivate is used to prevent unauthorized users from accessing certain routes. canActivate Guard prevents unauthorized user from accessing the route. But it does not stop the module from being downloaded. The user can use the chrome developer console to see the source code. The CanLoad Guard prevents the module from being downloaded.

   

CanLoad:    

         The CanLoad Guard prevents the loading of the Lazy Loaded Module. We generally use this guard when we do not want to unauthorized user to navigate to any of the routes of the module and also stop then even see the source code of the module.

      {

path: 'admin',

loadChildren: 'app/admin/admin.module#AdminModule',

canLoad: [AuthGuard]

          },

         With this code, the code for the AdminModule will only be loaded into the application if AuthGuard returns true.

Interceptor's

Angular's HTTP interceptors can be used to pre- and postprocess HTTP requests. It is the simplest way provided by the framework to intercept and modify the application's http requests globally before they are sent to the server.

Hostlistener : binds an event to the host element.@HostListener() function decorator allows you to handle events of the host element in the directive class.

Hostbinding: @HostBinding() function decorator allows you to set the properties of the host element from the directive class.

Directives: It allows you to attach a behavior to DOM elements. ngFor and ngIf are examples of built-in directives in Angular.

Router-outlet: Any component that gets matched by the Router will render it as a sibling of the Router outlet.

TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.

View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa.

·  Emulated (default) - styles from main HTML propagate to the component. Styles defined in this component's @Component decorator are scoped to this component only.

·  Native - styles from main HTML do not propagate to the component. Styles defined in this

component's @Component decorator are scoped to this component only.

·  None - styles from the component propagate back to the main HTML and therefore are visible to all components on the page.

Techniques of oneway binding

   Interpolation Binding: Interpolation refers to binding expressions into marked up language.

   Property Binding: Property binding is used to set a property of a view element. The binding sets the property to the value of a template expression.

   Attribute Binding: Attribute binding is used to set a attribute property of a view element.

   Class Binding: Class binding is used to set a class property of a view element.

   Style Binding: Style binding is used to set a style of a view element

Types of directives:

Component: A component directive is the most used and injects a template to a given component

Structural: Structural directives are directives that change the DOM layout, examples are *ngFor and *ngIf.

Attribute: Attribute directives change the style or behavior of an element

ViewState: It is maintained at only one level that is page-level. Changes made on a single page is not visible on other pages. Information that is gathered in view state is stored for the clients only and cannot be transferred to any other place

SessionState: It is maintained at session-level and data can be accessed across all pages in the web application. The information is stored within the server and can be accessed by any person that has access to the server where the information is stored.

Lazy loading: To load a feature module lazily we need to load it using loadChildren property in route configuration and that feature module must not be imported in application module. Lazy loading is useful when the application size is growing. In lazy loading, feature module will be loaded on demand and hence application start will be faster.

Eager loading: To load a feature module eagerly we need to import it into application module using imports metadata of @NgModule decorator. Eager loading is useful in small size applications. In eager loading, all the feature modules will be loaded before the application starts. Hence the subsequent request to the application will be faster.

One-Way Data Binding

In one-way data binding, we have different ways of binding data from our Component.ts class file to our  Component.html file:

String Interpolation

In String Interpolation we bind the data from a Component.ts class file to Component.html file by using the expression in double curly braces. If we don't pass the data or the component's field in double curly braces, then Angular treats this as a string value and displays the string value to the end-user. 

Property Binding 

In Property binding, we bind data from our Component.ts class to the Component.html file. The HTML elements property is bound with the values from the Component.ts file using square brackets []. 

Style Binding

Using Style Binding, we can set the style using the [ngStyle] attribute by passing the value to the Component.ts file.

Class Binding

Using Class Binding, we can set the ngClass attribute. With the [ngClass] attribute, we can set the class property of the HTML element and set the CSS for the applied value for the  [ngClass] attribute.

Event Binding 

It is one-way data binding, which is binding the value from the Component.html file to the Component.ts class file, or View to Component.

LifeCycleHooks

constructor

This is invoked when Angular creates a component or directive by calling new on the class.

ngOnChanges

Invoked every time there is a change in one of the input properties of the component.

ngOnInit

Invoked when given component has been initialized.
This hook is only called once after the first ngOnChanges

ngDoCheck

Invoked when the change detector of the given component is invoked. It allows us to implement our own change detection algorithm for the given component.

Undefined: It occurs when a variable has been declared but has not been assigned with any value. Undefined is not a keyword.

Undeclared: It occurs when we try to access any variable that is not initialized or declared earlier using var or const keyword. If we use ‘typeof’ operator to get the value of an undeclared variable, we will face the runtime error with return value as “undefined”.

Change Detection : Updating the DOM whenever data is changed. Angular provides two strategies for Change Detection.

In its default strategy, whenever any data is mutated or changed, Angular will run the change detector to update the DOM. In the onPush strategy, Angular will only run the change detector  when a new reference is passed to @Input() data. If Angular ChangeDetector is set to onPush then Angular will run change detector only when new reference is being passed to the component.

Webpack is a popular module bundler, a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser.

Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporates assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.

Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one or more bundles. With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.

Observables:

Observables provide support for passing messages between publishers and subscribers in your application. Observables offer significant benefits over other techniques for event handling, asynchronous programming, and handling multiple values.

Observables are declarative—that is, you define a function for publishing values, but it is not executed until a consumer subscribes to it. The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.

Observable: Assume that a professor is an observable. The professor teaches about some topic.

Observer: Assume that a student is an observer. The student observes the topic being taught by the professor.

Observables support single casting whereas subject supports multi-casting.

Subject is an special type of observable.

Benefits of Shared Modules

Instead of importing these common modules and components in every feature module, you can create a shared module that has all these modules and components. Import them into a shared module and import this shared module into all feature modules. This will save imports and a lot of coding lines.

Promise vs Observable:

• a Promise is eager, whereas an Observable is lazy,
• a Promise is always asynchronous, while an Observable can be either synchronous or asynchronous,
• a Promise can provide a single value, whereas an Observable is a stream of values (from 0 to multiple values),
• you can apply RxJS operators to an Observable to get a new tailored stream.

ReactiveForm – formgroup, formcontrol, formarray are the classes available in angular forms package.

Formcontrol – every html form elements is an formcontrol. Using formcontrol we can specify the input elements.

Formgroups – collection of form controls is called formgroup.

FormArray – collection of form groups.

Reactive & template driven are the ways to create a form.

RXJS - Observable vs Subscribe

In observable you need to define a function for publishing values. Observable are triggered as soon as you subscribe it.

Like Observable subject can't be consumed by subscribe it. while subscribe it just registering instance. Subject actually called by calling next method.  Basically subject controlling the trigger action. Subject are used inside the service. Whenever data change happened in one component that need to be known in other component.

Services: We can write business logic in service file and inject in required component or module level. Service file need to specify in providers. Providers will create the new instance for the service class. Specifying the service in  module provider, then service instance scope is across module level.

Angular Versions:

Angular 7: It is released with performance improvements and some interesting features like CLI Prompts, Virtual Scrolling, and Drag and Drops.Google has released Angular version 7 in Oct 2018 with a lot of optimum features and significant changes like Angular Material, CLI prompts, Scrolling, Drag, and Virtual and Drop & Component Dev Kit (CDK)

CLI prompts

In Angular 7, the command-line interface (CLI) prompts have been updated to v7.0.2, When the user executes common commands like ng add @angular/material or ng new it will automatically prompt users commands like ng add @angular/material help you discover built-in features like routing or SCSS support.

Angular 7 added a new compiler called the Angular Compatibility Compiler (ngcc). Just like the name suggests, the angular compiler offers an 8-phase rotating ahead-of-time compilation(AOT) and most of the angular applications noticed a massive reduction (95-99%) in bundle sizes.

Angular Material CDK (Component Dev Kit)

• Virtual scrolling
  The scrolling package enables loads and unloads items from the DOM depending upon visible parts of lists, resulting into a much faster experience for users having huge scrollable lists.

• Drag & drop
  Now you can re-order the list just by dragging and dropping with new @angular/cdk/drag-drop module which provides free dragging, sorting within a list, transferring items between lists, animations and much more.

Application performance

Many developers include the reflect-metadata polyfill in the production, so they decided to fix this part by automatically removing it from your polyfills.ts file and to speed up the performance new applications will warn when the initial bundle is more than 2MB and will error at 5MB which user can modify it in angular.json file. 

Angular Do-Bootstrap

Angular 7 added a new life-cycle hook (ngDoBootstrap) and interface (DoBootstrap), It's used for bootstrapping modules that need to bootstrap a component.

Router

In Angular 7, If you try to trigger navigation outside of the Angular zone it logs a warning (only in development mode). Also, adds navigation execution context info to activation hooks.

Some Major updates in Angular 7

• Angular 7 now supporting to TypeScript 3.1
• Added a new ability to recover from malformed URLs
• Downloadable console for starting and running Angular projects on your local machine
• compiler-cli: update tsickle to 0.29.x
• Export defaultKeyValueDiffers to private API 

1.      Angular 7 Released on October 2018

2.      This is a major release and expanding to the entire platform including-

—                Core framework,

—                Angular Material,

—                CLI

3.      Added a new interface - UrlSegment[] to CanLoad interface

4.      Added a new interface -  DoBootstrap interface

5.      Angular 7 added a new compiler - Compatibility Compiler (ngcc)

6.      Introduce a new Pipe called - KeyValuePipe

7.      Angular 7 now supporting to TypeScript 3.1

8.      Added Virtual Scrolling features

9.      Added Drag & Drop features

10. Added Better Error Handling

11. Added a new elements features - enable Shadow DOM v1 and slots

12. Added a new router features - warn if navigation triggered outside Angular zone

13. Added a new mapping for ngfactory and ngsummary files to their module names in AOT summary resolver.

14. Added a new "original" placeholder value on extracted XMB

15. Added a new ability to recover from malformed URLs

16. Added a new compiler support dot (.) in import statements and also avoid a crash in ngc-wrapped

17. Update compiler to flatten nested template fns

18. Added Native Script

19. Added Bundle Budget.

Angular 8

Angular 8 has introduced with a bunch of workflow and performance improvements and a lot has changed in the framework under the hood in terms of tooling. Comparing Angular 6 vs Angular 7 vs Angular 8 Finally, Angular 8 released with ivy rendering which Angular team was along with updated angular core framework, Angular Material, and the Command Line Interface or CLI.

Ivy Engine

Ivy is a major part of this release, and it took most of the effort from Angular 6 to release it. Ivy is a new rendering engine that will produce smaller bundle sizes But it's not recommended to start using it in production not just yet. Know more about what is ivy?

Web Workers

Web workers are essential for improving the parallelizability and the speed of your application. Angular 8.0 added support to CLI which provides one bundle for every web worker & they do it by writing code off the main thread.

Lazy Loading

Lazy loading is based on the concepts of Angular Routing and Angular 8 added support for dynamic EcmaScript imports in router configuration as it helps bring down the size of large files by lazily loading the files that are required.

Angular Firebase

Angular 8 officially added support for firebase and now deploying an Angular app to Firebase is very easy, and it doesn’t take too much time using Angular CLI, Service Worker.

Differential loading

Your Angular 8 apps now will more performant thanks to differential loading and two bundles are created for a production build i,e bundle for new browser with ES2015+ and with an old browser with ES5 version. The correct bundle will automatically load by the browser with new ES6 modules present in the new browser.
The ng build command with the --prod flag will take care of bundling everything out of the box.

Opt-In Usage Sharing

With Angular 8, we can switch between IVY and the regular View engine build. It enables opt-in to sharing telemetry about your Angular CLI usage with the Angular and can collect data like commands used and the build speed if users allow them which will help developers improve in the future.

Angular CLI Builders

The CLI Builder API is stable and available to developers who want to customize the Angular CLI by adding or modifying commands.

Major features included in Angular 8

• AngularJS API Migration Improvements with $location service
• Updated Typescript to 3.4.x
• @angular/platform-webworker and@angular/platform-webworker-dynamic both the packages are deprecated
•  @angular/http removed from the list of packages
• ng-build, ng-test, and ng-run are equipped to be extended by 3rd-party libraries and tool.
• Angular router backward compatibility
• Dart-sass for Sass files
•  The ViewChild and ContentChild decorators now must have a new option called static.
• Multicasting

Multicasting is the practice of broadcasting to a list of multiple subscribers in a single execution. With a multicasting observable, you don't register multiple listeners on the document, but instead re-use the first listener and send values out to each subscriber.

Bootstrap:

A bootstrapped component is an entry component that Angular loads into the DOM during the bootstrap process (application launch). Other entry components are loaded dynamically by other means, such as with the router.

Ahead-of-Time (AoT) Compilation

An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.

The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.

Angular compilation

In Angular, there are two ways to compile your application:

1. Just-in-Time (JIT), which compiles your app in the browser at runtime.
2. Ahead-of-Time (AOT), which compiles your app at build time.

JIT compilation is the default when you run the ng build (build only) or ng serve (build and serve locally) CLI commands:

```
ng build
ng serve
```

Copy

For AOT compilation, include the --aot option with the ng build or ng serve command:

```
ng build --aot
ng serve --aot
```

Copy

The ng build command with the --prod meta-flag (ng build --prod) compiles with AOT by default.

Why compile with AOT?

• Faster rendering

With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

• Fewer asynchronous requests

The compiler inlines external HTML templates and CSS style sheets within the application JavaScript, eliminating separate ajax requests for those source files.

• Smaller Angular framework download size

There's no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.

• Detect template errors earlier

The AOT compiler detects and reports template binding errors during the build step before users can see them.

• Better security

AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks