tag:blogger.com,1999:blog-79255222024-03-07T12:00:08.579+05:30The Code CaptainC#.Net, VB.Net, ASP.Net, SQL Server, Mobile Programming, DevOps, Gardening, DIYAyyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.comBlogger114125tag:blogger.com,1999:blog-7925522.post-36301409593246310852020-03-14T16:08:00.001+05:302020-03-14T16:08:18.583+05:30[Video Tutorial]: Change Detection Strategy in Angular<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">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.</span><span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">
</span><span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">
</span><span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">Github: <a href="https://github.com/ayyanarjayabalan/changedetectionstrategy">https://github.com/ayyanarjayabalan/changedetectionstrategy</a>
</span><br />
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/ln0g5mmA2jU" width="560"></iframe><br />
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-27323741968456055652020-03-09T23:41:00.001+05:302020-03-09T23:41:16.623+05:30[Video Tutorial]: Lazy / Dynamically loading of component in Angular 9<br />
In this video, I talk about<br />
<br />
1. how to load the component dynamically / lazily in angular 9 application using ViewContainerRef, ComponentFactoryResolver.<br />
<br />
Github: https://github.com/ayyanarjayabalan/lazycomponentloading<br />
<br />
<br />
<br />
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/9iIILdltWNM" width="560"></iframe><br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-10711851348467167172020-03-08T22:24:00.001+05:302020-03-08T22:24:25.239+05:30[Video Tutorial]: @ContentChild and @ContentChildren in angular<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">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: <a href="https://github.com/ayyanarjayabalan/angular_routing">https://github.com/ayyanarjayabalan/angular_routing</a>
</span>
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/J3TVXrOu5Iw" width="560"></iframe><br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-23412884387349011512020-03-08T22:21:00.000+05:302020-03-08T22:21:02.008+05:30[Video Tutorial]: @ViewChild and @ViewChildren in angular<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">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: <a href="https://github.com/ayyanarjayabalan/angular_routing">https://github.com/ayyanarjayabalan/angular_routing</a></span><span style="color: rgba(0 , 0 , 0 , 0.87); font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">
</span><br />
<span style="color: rgba(0 , 0 , 0 , 0.87); font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">
</span>
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/QMY4kFzTb88" width="560"></iframe><br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-81953155382643596222020-03-08T12:16:00.000+05:302020-03-08T12:16:05.651+05:30[Video Tutorial]: Routing in Angular<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">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</span><br />
<span style="color: rgba(0 , 0 , 0 , 0.87); font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="color: rgba(0 , 0 , 0 , 0.87); font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/BpHaPS3jCl4" width="560"></iframe><br />
<br />
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-18259829334192644882020-03-01T22:26:00.002+05:302020-03-01T22:37:54.254+05:30[Video Tutorial]: Customize http response using Http Interceptor in angular<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">In this video, I talk about
1. how to customize the http response.
2. how to add interceptor to app module.</span><br />
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><span style="color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif;">Github: <a href="https://github.com/ayyanarjayabalan/secureangularapp">https://github.com/ayyanarjayabalan/secureangularapp</a></span></span><br />
<span style="color: rgba(0 , 0 , 0 , 0.87); font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="color: rgba(0 , 0 , 0 , 0.87); font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/clAERAlRIW4" width="560"></iframe><br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-9432092489300578792020-03-01T22:24:00.003+05:302020-03-01T22:38:07.238+05:30[Video Tutorial]: Mock http request using Http Interceptor/Middleware in angular<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">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</span><br />
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><span style="color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif;">Github: <a href="https://github.com/ayyanarjayabalan/secureangularapp">https://github.com/ayyanarjayabalan/secureangularapp</a></span>
</span>
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/7ru_qNhpNrw" width="560"></iframe>
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-26563273780465518022020-03-01T22:22:00.002+05:302020-03-01T22:38:22.415+05:30[Video Tutorial]: Add custom header to http request using Http Interceptor/Middleware in angular<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">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.</span><br />
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><span style="color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif;">Github: <a href="https://github.com/ayyanarjayabalan/secureangularapp">https://github.com/ayyanarjayabalan/secureangularapp</a></span></span><br />
<span style="color: rgba(0 , 0 , 0 , 0.87); font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">
</span>
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/XL0oU3oFCOk" width="560"></iframe><br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-84183927956894882982020-02-29T17:00:00.003+05:302020-03-01T22:38:48.574+05:30[Video Tutorial]: Securing Angular Application using guard<br />
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">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</span><span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">
</span><br />
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span><span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><span style="color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif;">Github: <a href="https://github.com/ayyanarjayabalan/secureangularapp">https://github.com/ayyanarjayabalan/secureangularapp</a></span>
</span><br />
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Aa6pOmeI10s" width="560"></iframe><br />
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-3797251432876646202020-02-27T21:50:00.001+05:302020-03-09T23:59:00.661+05:30[Video Tutorial]: Auto unsubscribe in angular 9<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">In this video, I talk about</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">1. how to unsubsribe from observable when navigating to another component using ngOnDestroy event.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">2. how to install package @ngneat/until-destroy</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">3. In angular 9, how to use the above installed package to handle the unsubscription automatically using UntilDestroy decorator and UntilDestroyed(this) operator.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><span style="color: rgba(0 , 0 , 0 , 0.87); font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">Github: <a href="https://github.com/ayyanarjayabalan/secureangularapp">https://github.com/ayyanarjayabalan/secureangularapp</a></span></span><br />
<div>
<span style="font-family: inherit;"><br /></span></div>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/ZHS1morZV-s" width="560"></iframe>
</span>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-3936153579536935362020-02-27T10:00:00.003+05:302020-03-10T00:02:31.702+05:30[Video Tutorial]: Detect unsaved changes while navigating to another page using guard in Angular<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">In this video, I talk about</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">1. how to implement dirty check in a page.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">2. how to prevent the user to navigate to other page when unsaved changes in current page or form.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">3. how to implement the above behavior using angular guard with CanDeactivate.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">4. how to ask confirmation from user before navigating to other page.</span><br />
<br />
<br />
<iframe width="560" height="315" src="https://www.youtube.com/embed/JkjYm3wHzLU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-58021356015112598792020-02-25T06:45:00.002+05:302020-02-25T06:49:18.477+05:30[Video Tutorial]: Multi Language support Application (Internationalization – i18n) using json files in Angular<br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">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</span><br />
<br />
<span style="color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">Github: <a href="https://github.com/ayyanarjayabalan/multilingual-ngapp">https://github.com/ayyanarjayabalan/multilingual-ngapp</a></span><br />
<br />
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/kaY83nx0ya0" width="560"></iframe><br />
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-14117617623384267832020-02-22T15:51:00.001+05:302020-02-22T15:51:15.851+05:30[Video Tutorial]: Communication between components using service with subject<br />
<span style="color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">In this video, I talk about
1. how to communicate between components using service with subject.</span><span style="color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">
</span><span style="color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">
</span><span style="color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">Github: https://github.com/ayyanarjayabalan/communicationbetweencomponent</span><br />
<br />
<br />
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Ynvgx1Ecays" width="560"></iframe><br />
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-63553762723685002892020-02-21T23:13:00.002+05:302020-02-22T00:14:38.069+05:30[Video Tutorial]: Communication between parent and child component in angular<br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">In this video, i talk about,
1. how to interact between parent and child component using @Input and @Output decorator.</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">Github: </span><a href="https://github.com/ayyanarjayabalan/communicationbetweencomponent">https://github.com/ayyanarjayabalan/communicationbetweencomponent</a><br />
<br />
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Ed7f8359vdg" width="560"></iframe><br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-61591033979183097002020-02-21T10:05:00.001+05:302020-03-09T22:57:02.174+05:30[Video Tutorial]: Resolver in Angular<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">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</span><br />
<span style="color: rgba(0 , 0 , 0 , 0.87); font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">
</span>
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/yiLAzIP_oDI" width="560"></iframe>
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-75657151991947955742020-02-21T09:30:00.005+05:302020-03-09T23:05:11.758+05:30[Video Tutorial]: Network Aware Preloading Strategy in Angular<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">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.</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">Preloading Strategy: </span><a href="https://www.youtube.com/watch?v=kcGShnGg0ms">https://www.youtube.com/watch?v=kcGShnGg0ms</a><br />
<br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">Custom Preloading Strategy: </span><a href="https://www.youtube.com/watch?v=eMIPiJtaj60">https://www.youtube.com/watch?v=eMIPiJtaj60</a><br />
<br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">Github</span>: <a href="https://github.com/ayyanarjayabalan/preloadingstrategy">https://github.com/ayyanarjayabalan/preloadingstrategy</a><br />
<br />
<br />
<br />
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/M9hO68EdUCs" width="560"></iframe>
<br />
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-75594578778298648282020-02-19T22:18:00.001+05:302020-03-09T23:21:06.150+05:30[Video Tutorial]: Custom Preloading Strategy in Angular<br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">In this video, i talk about
1. When to use custom preloading strategy.</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">
2. how to implement custom preloading strategy.</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">
3. how to preload modules with some delay.</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">
4. where to specify preloading flag and delay flag in route.</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;"><br /></span>
<br />
<span style="color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif;"><span style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;">Below video is to understand the preloading strategy in angular.</span></span><br />
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/by4S4ttZMdM" width="560"></iframe>
<br />
<br />
<br />
<br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">Below video is to understand the custom preloading strategy in angular.</span><br />
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Cm_i7F1y0Qs" width="560"></iframe>
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-14676201233740641982020-02-19T22:13:00.001+05:302020-03-09T23:17:45.597+05:30[Video Tutorial]: Preloading strategy in angular application<br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">In this video, I talk about,
1. Purpose of preloading strategy.</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">
2. Difference between lazy and pre loading.</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">
3. When we have to go for preloading strategy</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">
4. how to define the preloading strategy</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">
5. Explain the types of preloading strategy</span><br />
<br />
<br />
<iframe width="560" height="315" src="https://www.youtube.com/embed/by4S4ttZMdM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-91102110060349932020-02-19T00:46:00.001+05:302020-03-09T23:25:06.857+05:30[Video Tutorial]: Lazy loading of module in angular 9<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">In this video, I talk about
1. what is lazy loading in angular
</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">2. how lazy loading helps to improve the performance of angular application
</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">3. how to implement module level lazy loading in angular 9.</span><br />
<br />
<br />
<iframe width="560" height="315" src="https://www.youtube.com/embed/6iWw1XfvFzQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-26759800772500187482020-02-19T00:30:00.001+05:302020-03-09T23:30:55.476+05:30[Video Tutorial]: How to create custom directive in angular<br />
<span style="color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">In this video, I talk about
1. Types of directives</span><br />
<span style="color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">
2. How to create a custom directive to change the appearance of html element</span><br />
<br />
<br />
<br />
<iframe width="560" height="315" src="https://www.youtube.com/embed/HRXwdPUu-ys" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-6997086774480152112020-02-19T00:23:00.001+05:302020-03-09T23:35:31.362+05:30[Video Tutorial]: How to create custom pipe in angular<br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">In this video, I talk about
1. Purpose of directives.</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">
2. how to create custom pipe in angular</span><br />
<br />
<br />
<iframe width="560" height="315" src="https://www.youtube.com/embed/RUwFp8wmL9Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br />
<br />
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-79832408623402579462020-02-17T19:43:00.000+05:302020-03-09T23:49:47.646+05:30[Video Tutorial]: Upgrade existing angular application and angular cli to angular 9<br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">In this video, i talk about </span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">
1. How to upgrade existing angular 8 application to angular 9 version.
2. How to upgrade ANGULAR CLI (@angular/cli) to version 9.</span><br />
<br />
<br />
<iframe width="560" height="315" src="https://www.youtube.com/embed/pnFqmKzp1mg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-41712592278194651242020-02-15T10:51:00.000+05:302020-03-09T23:53:22.617+05:30[Video Tutorial]: Differential loading in angular application to support both modern and older browsers<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">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.
</span><br />
<div>
<br /></div>
<div>
<span style="font-family: "roboto" , "noto" , sans-serif; font-size: 15px; white-space: pre-wrap;">Youtube Channel: </span><a href="https://www.youtube.com/channel/UC_QTyKv3TLUGFOQPYXd0Wfg">https://www.youtube.com/channel/UC_QTyKv3TLUGFOQPYXd0Wfg</a></div>
<div>
<br /></div>
<div>
<br /></div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/saz127quaZ0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-66005403119311035722020-02-14T00:32:00.001+05:302020-02-14T00:32:23.570+05:30[Video Tutorial]: In Angular, How to change title of the browser while navigating to different components<br />
<span style="font-family: "roboto" , "noto" , sans-serif;"><span style="font-size: 15px; white-space: pre-wrap;">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: </span></span><a href="https://github.com/ayyanarjayabalan/changebrowsertitle">https://github.com/ayyanarjayabalan/changebrowsertitle</a><br />
<span style="font-family: "roboto" , "noto" , sans-serif;"><span style="font-size: 15px; white-space: pre-wrap;"><br /></span></span>
<span style="font-family: "roboto" , "noto" , sans-serif;"><span style="font-size: 15px; white-space: pre-wrap;">Youtube Video: </span></span><a href="https://youtu.be/8iWAChl3rCQ" target="_blank">https://youtu.be/8iWAChl3rCQ </a><br />
<br />
<br />
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/8iWAChl3rCQ" width="560"></iframe>
<br />
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0tag:blogger.com,1999:blog-7925522.post-56261861184528806782020-02-11T20:00:00.001+05:302020-02-11T20:00:11.200+05:30[Video Tutorial]: Create angular library, publish it to NPM repository and then consume it.<br />
<br />
<span style="color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">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.</span><br />
<br />
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/2h_dkl10Brw" width="560"></iframe><br />
<br />
<br />
<br />Ayyanar Jayabalanhttp://www.blogger.com/profile/05609935183415704483noreply@blogger.com0