Binding 101 in Angular

Template = UI HTML   
Component = TS Script

Access HTML element (DOM object) in typescript (Same component)
HTML Element -> Component typescript (One Way)
1. HTML Bind -> Declare variable element using '#'
2. Typescript Bind -> Declare @ViewChild(< Variable in html>) <variable in TS>: ElementRef;

----------------------------------------------------------------------------------------------
Access Typescript variable in HTML (Same component)
typescript -> HTML Element (One Way)
1. HTML Bind -> using interpolation {{variable in TS}} (display purpose)
Direct use the varible name to get the value
2. Typescript Bind -> Declare variable

----------------------------------------------------------------------------------------------
Access HTML input value in typescript and vice verca (Same Component)
Component typescript <-> HTML Input (Two Way)
1. HTML Bind -> Assign [(ngModel)] = variable in TS
2. Typescript Bind -> Declare Variable

------------------------------------------------------------------------------------------------
Assign HTML Attribute using Typescript variable (HTML attribute binding)
Component typescript -> HTML Input (One Way)
1. HTML Bind -> Assign [Name HTML attribute] = variable in TS
2. Typescript Bind -> Declare Variable

-------------------------------------------------------------------------------------------------
Access DOM element in typescript (Event driven)
HTML Elment -> Component typescript (One Way)
1. HTML Bind -> Assign (Name HTML event) = Function Name in TS($event)
2. Typescript Bind -> Declare Function definition

-------------------------------------------------------------------------------------------------
Access HTML element on another HTML element (DOM Object)
HTML Elment -> HTML Elment
1. HTML Bind -> Using '#' to create referencing the DOM object HTMLInputElement

-------------------------------------------------------------------------------------------------
Access component variable on another component using attribute (create HTML attribute aka custom directive for others to access)
HTML element(1st component) -> TS variable (2nd component) (one way)
1. HTML Bind(1st component) -> Use [selector-input] = varibale in TS (1st component)
2. Typescript Bind(2nd component) -> create @Directive  selector: '[selector-input]'
@Input('selector-input') dataUrl:string;

-------------------------------------------------------------------------------------------------
Accces HTML element in typescript (using Directive)
TS variable -> HTML element
1. HTML Bind -> Place selector-input as attribute inside elment
2. Typescript Bind -> create @Directive  selector: '[selector-input]'
  access the element using ElementRef

-------------------------------------------------------------------------------------------------
Using component inside another template  
1. HTML Bind -> Place the selector component inside template