Angular 10 Tutorial #14 - Component Lifecycle Hooks | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for beginners in today's episode we will learn about component life cycle hooks in the previous episode we have learned what components are how to generate components what is component decorator what are the different values or definitions it can take etc so if you're new to this channel i would request you kindly go through the previous episode so you have continuity in your learning welcome back friends this is part 14 of the angular 10 full tutorial playlist i have planned around 100 tutorials for you in this series so make sure you have subscribed to my channel and so and you check out the description box below so you get the notes and the code all right so so far we have completed all these topics on your screen right now and we are on the 14th episode so in the last two episodes we have learned and mastered angular modules and angular components today we will learn about angular component life cycle all right so every angular component right has eight life cycle hooks right that means each component can be tracked with eight different life cycle hooks these eight things together are called as component life cycle that means how a component starts how it is tracked and how finally till it is destroyed that means these are the eight stages that a component goes through every time that we create we change or we can use that to track individual component why do we need it is the first question so during the course of your application there will be lot of changes that will happen to components for example some data might change while you do some operations or you want some data to be loaded while the component is created you also want to make sure that if a component changes some other component should get that latest information so these are some of the real time use cases which are used in creating the life cycle hooks so let's learn more about them so the eight life cycle hooks are ng on changes that means whenever a component changes ng on init ng do check ng after content init ng after content checked ng after view init ng after view checked and ng on destroy so these are the eight life cycle hooks that a component can be used with plugging in with our custom logic let's learn about each one of them in detail to understand what they do all right so we will go through each one of them now and we will understand what it does in detail ng on changes used in pretty much any component that has an input right so whenever there is an input that your component is receiving there will be some changes right changes to value and that's where it is used that is ng on changes ng on init means it is used for initializing the data in your component that means whenever your component is rendered for the first time you need to call something and load your data in the component that is ng on init ng do check called during all the change detection runs so angular runs on change detection strategy which means whenever there is a change or an update or it's detected it will do a ng do check the next one is ng after content in it which means this method is called once after first ng do check right so this is called through the run of initialization of the content okay then we have ng after content checked which means this is called after every ng do check okay it will wait after till ng content init on first run through right then we have ng after view in it that means once the view is initialized what it should do right that is ng after view in it we also have ng after view checked that means this is called after all the content is initialized and checked this is the first call after ng after view in it this is called after every ng after content checked call is completed the last one is ng on destroy this is used to clean up any necessary code when a component is removed from the dom fairly often used for subscribe unscrups unsubscribing from the things like services called only just once before the component is removed from the dom itself right so this eight this is all the theoretical explanation i would say for you to understand and know what they do right but my idea is to show you practical and teach you how to use them in real time so which we will be doing going forward as and when we uh start writing our application but you should be aware of these if i implement them now you will be confused right and that's why i don't want to do that i am introducing this topic to you so that you should be aware but we will start using them in the coming episodes so now talking about some of the most used ones right so i have worked on large enterprise applications on angular and i can tell you with confidence some of the most used ones right if you ask any good developer on angular they will tell you that you don't have to use all eight life cycle hook always right it doesn't make sense to be honest and besides it doesn't serve the purpose again that's depending from application logic to logic but in most cases you will have to use ng on changes that means you need to keep track of some component whether it is changing or not you will also need ng on in it very frequently because you need to initialize data into components you will also need ng after view in it so that's another thing that is quite oftenly used finally we have something called ng on destroy so usually we will subscribe to some data from services in ng on init and we will unsubscribe in the component on ng on destroy right now let me show you with some code examples again i will not jump into too much to confuse you i will hold your hand slowly and graduate you step by step right so what i'm going to do first is i'm going to give you some component life cycle hooks right so uh let me first show you what how that and do a ng serve so i will show you so far we built some components some modules let me show you the output first and then we will try and understand lifecycle hooks in uh how it's working let's give it a one quick minute so as usual friends uh i can be reached at surya dot aradia at gmail.com uh send me your doubts queries if you have um i'm here to help you as much as i can so make sure that you get you learn practice and if you're stuck just let me know in the email address or in the comments section i'll be happy to help you all right so let's give it a minute it's compiling in the meanwhile please do like share comment and subscribe to my channel subscribe to my channel all right so our application is building so let's give it okay so now it's compiled right so let's see the application that we have done so far it's nothing fancy it will not show up anything because we have not done any uh logical pieces yet but just to show you that all our components modules are working fine i just want to show you through that all right so what we'll do uh the first thing is we'll run through localhost so it says simple crm abc abc abc right there is nothing much so go to app component you see that's the code it's here just delete everything that we have and you see just i have the title right it should show simple crm okay let's save it now it's compiled in the title okay so here it's there let's call it simple crm alrighty and save it okay so now you should see output as simple crm that's the most simplest uh code that you can think of it just have a title right but you see we created a lot of modules and components we will not use them now we will hold on for couple of more i think one more episode and then we will start coding right but if you open any component let's say add contact right you would see ng on in it right this is a default hook that is already coming with every component that you generate right so that's a default one that is always generated okay so let me close other tabs for you okay so by default we have ng on init that's the one that is always coming with the component that you generate right to use this we have to implement ng on in it right so you see you have to import that life cycle hook whichever you want to use now let's say i want to implement ng on changes right so we can say on changes right and it automatically imported from angular core and it's an error because i have not implemented this so you will say ng on changes again right so the important thing is whichever life cycle hook you want to use right whichever life cycle hook we want to use first just import it in the class right like this import it here from angular core then do a implements the interface that is on changes and then finally right second so the first step is imported second extend the implements interface right third implement the method right so three steps first import the lifecycle hook that you want to work with second implements so you can have more than one here like i have shown you ng on init ng on changes you can have any number of ng on destroy right so it it imported ng on destroy then copy this and go here and say ng on destroy right so you can have any number of life cycle hooks any number of life cycle hooks implemented okay and so there are eight life cycle hooks that we will implement and these are the this is how you will use them right now there are a lot of confusion questions i'm sure you will have i would say list them down because today um i don't want to confuse you right it's too early it's too early for us to implement all of them today right so we will revisit will revisit this topic again when we do component child parent child communication right so just to give you a brief about it uh and component communication means communicating between communication means uh between components right between components it can be parent child child to parent parent to child right child to parent so this is how data is shared right so it's too early for us today because you will end up confused but like i said i am here to teach you end to end right and to master you right to help you master angular so what i will do is we will come back to this chapter again it is confusing little bit to be honest uh for beginners you will be you will be like um you know it it's easy to get um scared by looking at this i don't want to scare you i want to help you right so what i will do is i will go step by step in the next episode we will learn about the templating then we will learn about directives and then finally we will learn about component communication and the life cycle hooks again right that is a that is the only way to learn and that is the only way to master it if you go otherwise there are full chances that you will be lost and that's not the right way to study i would say all right so that being said um that brings us to the end of this episode like i said we will come back to the component communication after templating and directives right so stay tuned for that i will definitely cover and help you master it so don't worry about it so in the next uh episode we will talk about component communication little bit uh what it means and then we will jump into uh templating and directives all right thank you so much for joining i hope you are enjoying the series i hope you're learning and stay tuned i will cover more details to help you learn and master angular if you like the video give a thumbs up subscribe comment share and like the video thank you so much

Channel: ARC Tutorials

Views: 21,878

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular full tutorial series, angular 2021 full course, Angular component lifecycle hooks

Id: vrNFylFhn_E

Length: 14min 48sec (888 seconds)

Published: Mon Nov 02 2020