For DataBinding

Angular Artifacts

> property and event binding 
In angular property and event binding is used to transfer data acreoss compoenent 
This is the best approch for transferring data 
if sender and reciever compomenet are very far then we can use observable seream using a data sharing service
@input() and @output() property decorators are used to pass data arround

> View Encapsulation 

In angular a compoenent is associated with a SCSS file which is very specefic to that acompoenent . 
but commmon CSS behaviour does not work like that It apply CSS to all element of that file.
Angular prevent this default behaviour using View Encapsulation 
this default angular behaviour can also be changes using @Componenet() decoretor
@Componenet({
..
encapsulation: ViewEncapuslation.Node})

>Accessing template variable
In angular data from Template to TS is passed by multiple way one of it is template
is can be associated with any HTML element as #variableName
To pass this vairable we need a property binding or Event Binding 

> Accessing template with out any event or property binding 
@viewChild('variableName') variable : ElementRef 
by using above approch we can access templete directly inside TS file 
variable.NativeElement.value withh give value of a element
Note this is not a best way to access template as it may cause problem with directive

>Pushing Template from Parent component to Child Compoenent
In angular when using custom compoenent all HTML code between openinig and closing tag is removed by default 
to persisit this we can use <ng-content> </ng-content> tag
this tag will push a partial template from parent Compoenent template to Child compoenent template 
So <ng-content> will replace the template passed by parent template

>Understanding Agnular life cycle
When angular find a component tag in index.html it create a new instance of a compoenent 
this compoenent creation process contain some phase , they are called as life cycle hooks 
1) ngOnChanges() this is execurted multiple time, when compoenet is created this hook get execute Also when any input property changes 
  this hook get executed | for first call Compoenet is not added to DOM but in subsequent call Compoenet is part if DOM
  this method has paramter as SimpleChanges which store old and new value 
2) ngOninti() execute once when compoenet is initialized , This hoook get executed after copoenent's constructor execution
  so this phase confirms that an object of Compoenet is created 
  By this time compoenet is not added to DOM
3)ngDoCheck() this is executed with EVERY Change detection cycle. Agnular keep running changes detection in background when 
any value changes from TS side or TEMPLATE side. using this hook we can let angular know about specefic spacial case whic Angular is not 
able to identify

4) ngAfterContentInit() this hook is called when parent Templlate emit some content into Child template using (ng-content)
In this lifecycle hook we can access @ContentChild('ParentREF') element which has been using in parent's template
before this lifecycle hook 'ParentREF' will not be available
5) ngAfterContentChecked() this is called everytime when projected content is changed 
Note : Lifecycle hook of child component will start from here , so after this hook we wil see ngOnChange() ngOninti() .... of child 
compoenent then It will start with ngAfterViewInit
6) ngAfterViewInit() this is called evertime when child view is initialized (ie child view is rendered)
With this lidecycle hook we can acess @ViewChilt('ChildREF') element , before this variable will not be available
7) ngAfterViewChhecked() this is called when child template is checked 
8) ngOnDestroy() this is called when compoenet is not required , this pahse is for removing connection and cleanup