Ayyanar Jayabalan
Director of Technology
42 years old
India
Professional Status
Employed
Unavailable
About Me
Seasoned, technically inclined and highly empowered professional offering an eventful career of over 18 years studded with professional brilliance predominantly in the areas of Angular, DevOps, architecture, mortgage domain, real estate domain, project lead, team lead, database architect, SaaS products, PMO process, executing & implementing high valued projects for niche customers; vast experience in e-Commerce, Microsoft technologies, content management, legal data discovery, agile development, preparing SOW, SWAG, LOE, Change Orders, database design, performance analysis, database administration activities, preparing coding standards for .Net & SQL Server, preparing development delivery checklist and production move checklist; tremendous exposure in Angular JS, Deployment Automation, Automation Testing, ASP.Net, SQL Server and Content Management System; proactive, motivational and goal-oriented leader with established record of success in leading corporate technology initiatives; regularly conduct seminars and training sessions to development and architecture team in latest technologies; flexible and able to adapt quickly to changing business environments and needs ensuring the delivery of new, highly effective business solutions on time and under budget.
The Code Captain
ayyanar.blogspot.com
[Video Tutorial]: Change Detection Strategy in Angular
14 Mar 2020
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
09 Mar 2020
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
08 Mar 2020
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
08 Mar 2020
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
08 Mar 2020
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
01 Mar 2020
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
01 Mar 2020
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
01 Mar 2020
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
29 Feb 2020
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
27 Feb 2020
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
27 Feb 2020
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
25 Feb 2020
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
22 Feb 2020
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
21 Feb 2020
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
21 Feb 2020
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
21 Feb 2020
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
19 Feb 2020
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
19 Feb 2020
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
18 Feb 2020
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
18 Feb 2020
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
18 Feb 2020
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
17 Feb 2020
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
15 Feb 2020
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
13 Feb 2020
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.
11 Feb 2020
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.
