[Video Tutorial]: Change Detection Strategy in Angular

In this video, I talk about 1. how angular default change detection works. 2. how default change detection settings would affect the performance of big enterprise angular application. 3. how to change the change detection strategy to OnPush. 4. how object reference changes causing the component change detection. 5. how to improve the performance further by using Observable and Subject. Github: https://github.com/ayyanarjayabalan/changedetectionstrategy

[Video Tutorial]: Lazy / Dynamically loading of component in Angular 9

In this video, I talk about

1. how to load the component dynamically / lazily in angular 9 application using ViewContainerRef, ComponentFactoryResolver.

Github: https://github.com/ayyanarjayabalan/lazycomponentloading

[Video Tutorial]: @ContentChild and @ContentChildren in angular

In this video, I talk about 1. How to access the single or first content of child component using @ContentChild and AfterContentInit 2. How to access the multiple content of same child component using @ContentChildren and AfterContentInit Github: https://github.com/ayyanarjayabalan/angular_routing

[Video Tutorial]: @ViewChild and @ViewChildren in angular

In this video, I talk about 1. How to access the single or first child component using @ViewChild and AfterViewInit 2. How to access the multiple same child component using @ViewChildren and AfterViewInit Github: https://github.com/ayyanarjayabalan/angular_routing

[Video Tutorial]: Routing in Angular

In this video, I talk about 1. Routing in angular 2. Child Routing 3. Child Module Routing 4. Route with Param 5. Route with Optional Param 6. Relative Navigation 7. Default Route 8. Wild card pattern matching route (Page Not Found) Github: https://github.com/ayyanarjayabalan/angular_routing

[Video Tutorial]: Customize http response using Http Interceptor in angular

In this video, I talk about 1. how to customize the http response. 2. how to add interceptor to app module.

Github: https://github.com/ayyanarjayabalan/secureangularapp

[Video Tutorial]: Mock http request using Http Interceptor/Middleware in angular

In this video, I talk about 1. how to mock or fake the http request. 2. how to create a mock interceptor. 3. how to mock specific request and return mock response. 4. when we can use mock interceptor

Github: https://github.com/ayyanarjayabalan/secureangularapp

[Video Tutorial]: Add custom header to http request using Http Interceptor/Middleware in angular

In this video, i talk about 1. how to add custom token header to http request using Http Interceptor. 2. how to add custom token header only after login. 3. how to create Http Interceptor in angular cli. 4. how to add that interceptor as part of app module.

Github: https://github.com/ayyanarjayabalan/secureangularapp

[Video Tutorial]: Securing Angular Application using guard

In this video, i talk about 1. how to secure angular application using guard 2. how to allow to user to access specific module based on user role. 3. how to allow the user to access the protected page only after login

Github: https://github.com/ayyanarjayabalan/secureangularapp

[Video Tutorial]: Auto unsubscribe in angular 9

In this video, I talk about

1. how to unsubsribe from observable when navigating to another component using ngOnDestroy event.

2. how to install package @ngneat/until-destroy

3. In angular 9, how to use the above installed package to handle the unsubscription automatically using UntilDestroy decorator and UntilDestroyed(this) operator.

Github: https://github.com/ayyanarjayabalan/secureangularapp

[Video Tutorial]: Detect unsaved changes while navigating to another page using guard in Angular

In this video, I talk about

1. how to implement dirty check in a page.

2. how to prevent the user to navigate to other page when unsaved changes in current page or form.

3. how to implement the above behavior using angular guard with CanDeactivate.

4. how to ask confirmation from user before navigating to other page.

[Video Tutorial]: Multi Language support Application (Internationalization – i18n) using json files in Angular

In this video, I talk about 1. different ways of implementing internationalization. 2. how to implement multi language support application in angular using json files. 3. how to select the default browser language. 4. how application is loading the language json based on selection of language. 5. where to specify the path to load language specific files. 6. installing @ngx-translate/core, @ngx-translate/http-loader, @beisbjerg/ngx-translate-extract 7. how to add missing text to json file using ngx-translate-extract package with NPM run command

Github: https://github.com/ayyanarjayabalan/multilingual-ngapp

[Video Tutorial]: Communication between components using service with subject

In this video, I talk about 1. how to communicate between components using service with subject. Github: https://github.com/ayyanarjayabalan/communicationbetweencomponent

[Video Tutorial]: Communication between parent and child component in angular

In this video, i talk about, 1. how to interact between parent and child component using @Input and @Output decorator.

Github: https://github.com/ayyanarjayabalan/communicationbetweencomponent

[Video Tutorial]: Resolver in Angular

In this video, I talk about 1. when to use the route resolver. 2. how to implement the resolver in angular. Github: https://github.com/ayyanarjayabalan/preloadingstrategy

[Video Tutorial]: Network Aware Preloading Strategy in Angular

In this video, I talk about 1. defining preloading strategy based on internet speed of your network. 2. if the network speed is 2g, no need to preload the modules. 3. if the network speed is 3g/4g, preload the modules. 4. how to implement the preloading strategy in angular based on network speed.


Preloading Strategy: https://www.youtube.com/watch?v=kcGShnGg0ms

Custom Preloading Strategy: https://www.youtube.com/watch?v=eMIPiJtaj60

Github:  https://github.com/ayyanarjayabalan/preloadingstrategy

[Video Tutorial]: Custom Preloading Strategy in Angular

In this video, i talk about 1. When to use custom preloading strategy.
2. how to implement custom preloading strategy.
3. how to preload modules with some delay.
4. where to specify preloading flag and delay flag in route.



Below video is to understand the preloading strategy in angular.





Below video is to understand the custom preloading strategy in angular.

[Video Tutorial]: Preloading strategy in angular application

In this video, I talk about, 1. Purpose of preloading strategy.
2. Difference between lazy and pre loading.
3. When we have to go for preloading strategy
4. how to define the preloading strategy
5. Explain the types of preloading strategy

[Video Tutorial]: Lazy loading of module in angular 9

In this video, I talk about 1. what is lazy loading in angular
2. how lazy loading helps to improve the performance of angular application
3. how to implement module level lazy loading in angular 9.

[Video Tutorial]: How to create custom directive in angular

In this video, I talk about 1. Types of directives
2. How to create a custom directive to change the appearance of html element

[Video Tutorial]: How to create custom pipe in angular

In this video, I talk about 1. Purpose of directives.
2. how to create custom pipe in angular

[Video Tutorial]: Upgrade existing angular application and angular cli to angular 9

In this video, i talk about
1. How to upgrade existing angular 8 application to angular 9 version. 2. How to upgrade ANGULAR CLI (@angular/cli) to version 9.

[Video Tutorial]: Differential loading in angular application to support both modern and older browsers

In this video, i talk about 1. how angular cli generate bundles to support both modern and older browsers. 2. how tsconfig file changes impacting the generation of bundles. 3. how browserlist file changes impacting the generation of bundles. 4. how browser loading the respective files instead of loading all the files. 5. why angular cli not combining both es5 and es2015 files.

Youtube Channel: https://www.youtube.com/channel/UC_QTyKv3TLUGFOQPYXd0Wfg

[Video Tutorial]: In Angular, How to change title of the browser while navigating to different components

In this video, i talk about 1. how to change the title of browser while navigating to different component using title service in @angular/platform-browser, router events, Activated Route. 2. how to change the title of browser while navigating to child level component. GitHub: https://github.com/ayyanarjayabalan/changebrowsertitle

Youtube Video: https://youtu.be/8iWAChl3rCQ

[Video Tutorial]: Create angular library, publish it to NPM repository and then consume it.

In this video, I'm talking about 1. How to create angular library. 2. How to publish it npm repository (npmjs.com) 3. How to consume the published library in another angular application.

[Video Tutorial]: Understanding Angular Workspace Configuration File (angular.json)

In this video, you can understand 1. How to create angular workspace configuration file (angular.json) 2. How to create multiple projects like angular application and library. 3. How to change the customize the ng generate command. 4. How to change the prefix of component selector. 5. What is builder and its configuration. 6. How to specify application specific tsconfig settings.

[Video Tutorial]: RxJs Subject - Subject, BehaviorSubject, ReplaySubject, AsyncSubject

Subject:
Subscriber will receive data of newly emitted value from subject and won’t receive data which is already been emitted by subject before subscription. BehaviorSubject: Subscriber will receive initial data supplied by subject or recent value emitted by subject. ReplaySubject: Every new subscriber will receive set of recent values emitted by subject based on buffer size. AsyncSubject: All subscriber will receive recent value only after completion of Observable subject. JsFiddle: https://jsfiddle.net/ayyanarj/d9qr1Lch/33/

Youtube: https://youtu.be/5foQB5Qpock

Youtube Channel: https://www.youtube.com/channel/UC_QTyKv3TLUGFOQPYXd0Wfg/

[Video Tutorial]: RxJs Operators - zip, combineLatest, withLatestFrom, forkJoin

RxJs Operators - zip, combineLatest, withLatestFrom, forkJoin

In below youtube video, i have explained the rxjs operators of zip, combineLatest, withLatestFrom and forJoin. And also, explained the differences between these four operators.

Covert blob to string in Javascript to support in IE (Internet Explorer) browser

If you would like to covert stream of bytes (blob) to string in client side, you can easily done with below few lines of code using text() method.

 // Easy way  
 var blb = new Blob(["Lorem ipsum sit"], {type: "text/plain"});  
 var strValue = '';  
 new Response(blb).text().then(t => {  
 console.log(t);  
 });  

Above code does not work in IE browser. if you see below table, you can understand the syntax supported by each browser.

So, above text() method won't work in IE browser. To fix this, we can FileReader to read the blob value. we have to attach "loadend" event to FileReader which will get triggered after read completed. Once read completed, we can get the completed blob object into string. please refer the below code.

 // IE FIX  
 var  blb = new Blob(["Lorem ipsum sit - IE FIX"], {type: "text/plain"});  
 var strValue = '';  
 const readText = (blobString) => {  
  console.log(blobString);  
 }  
 // Since IE not supporting text(), we are using FileReader to convert the blob to string.  
 const showLocalError = this.showError;  
 const reader = new FileReader();  
 // this event get triggered once read from blob is completed. once loadend event triggered, we can retrieve the value.  
 reader.addEventListener('loadend', function () {  
  if (reader && reader.result) {  
      readText(reader.result.toString());  
  } else {  
      console.log('Error in converting blob to string');  
  }  
 });  
 // using readAsText, we are start to reading the blob. Once reading completed, loadend event will get trigged   
 reader.readAsText(blb);