[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.