When we work with Angular or do a project in Angular irrespective of any version 1x, 2x or 4x very most important part is Component.
Component acts as binder, it does the work of binding between User Interface(UI) and Model
In order to understand it more clearly below is the snapshot of actual component code image taken from Visual Studio. In the below image it is shown that Grid component which is composed of "gridColumns", "gridData" and "EntityName" are nothing but they are "Model" which is getting binded with "Grid.html" also termed as UI.
So in short always remember that every Component has Model and UI(User Interface) or View.
So whenever Component, View and Model load inside the browser you will find that lots of changes take place.
Consider a simple scenario where user does activity like clicking on button or typing some input in the textbox within the browser. This activity track is done or check done is by HTML DOM like gotfocus, lostfocus or button click. And if any Angular event is tied up with the HTML which is denoted by "@" symbol then those event are send to the Angular Component. Once those request are received by Angular component then within that processing of request are done at "Model" and "View" as well. Once this processing is finished then those processed updates are sent to HTML DOM which is then seen by the user in his browser. These sent updates from Angular DOM to HTML DOM are denoted by expression, "ngfor". Below is the snapshot of the same: -
Now as we have understood the flow from user’s activity i.e. request till the updated view is received. Being an Angular developer we would like to attach some customized code to the event which is done with the help of hookup points. In other words with help of hookup points customized code can be written on each event of component, Model or View. And this we can achieve with the help of Angular component life cycle.
Basic definition of Angular Life Cycle is that it has events and in those events we can write customized codes and when these events run those customized written codes gets executed.
There are total all in 9 events given by Angular where you can go and put the custom code here are they as follows: -
Below is in the in action pictorial image of the flow and each events and total all in 9 events of the Angular. Here in this image we have two separate DOM on the left side we have HTML DOM and on the right side we have Angular DOM. There are three stages shown in the HTML DOM the first is "DOM Init", "DOM Check" and third stage is "DOM Unload". When user comes for the first time by opening the browser it hits the "DOM Init" thereafter when user does interaction in terms of clicking on the browser, filling data in the text box then that is "DOM Check" stage and finally when user closes the browser it
reaches on "DOM Unload" stage. Each of the HTML DOM stages is connected to the event of Angular DOM.
Constructor event is fired even before "Init" event is fired.
When "DOM Init" of HTML is hit at that time Angular life cycle has given three "Init" events the first is "OninIt" event which happens inside Component before it get initialized. Thereafter when the Content or Model is loaded then "AfterContentInit" event will happen. And finally when "Content or Model" is mapped to the "View", here it will have "AfterViewInit" event happening. If you notice very closely then all these events are having "Init" so in short when HTML DOM Init is initialized it will fire three events in this sequence "Init" of component, then "Init" of Content and then "Init" of View.
Also if are new and want to learn Angular a follow project based video series on Angular 2 below: -
