Saturday, March 14, 2020

[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





Monday, March 09, 2020

[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







Sunday, March 08, 2020

[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







Sunday, March 01, 2020

[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




Saturday, February 29, 2020

[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





Thursday, February 27, 2020

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




Tuesday, February 25, 2020

[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