Skip to main content

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

Comments

Post a Comment

Popular posts from this blog

Flash Tool Error Codes -MTK Chipset

Complete List of SP Flash Tool Error Codes and their Meanings and Solutions MTK Chipset. . How to Fix SP Flash Tool Errors (BROM Error Codes): SP Flash Tool Failed to enumerate COM Port This error clearly means that the Flash Tool has issues finding the COM port on which your device is connected. Solution: Connect your watch to other Port and make sure you have USB Drivers installed. Open “Device Manager” and find the COM Port of the device you connected. Once found, open Flash Tool, click on Options -> COM Port -> Select the COM Port on which you have connected your device. Device automatically disconnects during flashing Meaning: Device disconnects as soon as the flashing process begins, interrupting the process. Solution: Try a different USB Cord, USB Port & PC Hold the Volume down or up button while connecting the device to PC for flashing SP Flash Tool remains at 0% Solution: Install necessary MediaTek VCOM drivers on PC. Use the latest version of S...
Post a Comment
Selanjutnya »

Fiberglass DIY

Method Mix Fiberglass Substance Weigh a certain amount of resin, then add cobalt water according to 0.8% -1% of the resin amount, and stir evenly (  packing under 3 kg, the accelerator has been added, skip this step  ) Add the curing agent again at 2% -2.5% of the resin volume, and stir evenly. The fixing speed of this series of products is closely related to the ambient temperature and humidity. According to the temperature, adjust the proportion of curing agent and cobalt water appropriately. Reference data, add at room temperature 25 ℃, gel time about 9-15 minutes.  The curing time is 20-30 minutes, the above ratio is for reference only, the actual operation is subject to the site requirements. Proportion 100ml: (0.8-1)ml <----->100ml: (2-2.5)ml Resin: accelerator  <----->  Resin: curing agent Method of Repairing FRP: Grind the glass fiber reinforced plastic surface to be repaired with sandpaper first. Brush the tuned resin ...
Post a Comment
Selanjutnya »

Component vs Directives

Component and Directive is very important in Angular 2. Today we sharing difference between component and directive in Angular 2. Components Directive For register component we use @Component meta-data annotation. For register directives we use @Directive meta-data annotation. Component is a directive which use  shadow  DOM to create encapsulate visual behavior called components.  Components are typically used to create UI widgets. Directives is used to add behavior to an existing DOM element. Component is used to break up the application into smaller components. Directive is use to design re-usable components. Only one component can be present per DOM element. Many directive can be used in a per DOM element. @View decorator or templateurl template are mandatory in the component. Directive don’t have View. Component is used to define pipes. You can’t define Pipes in directive. viewEncapsulation can be define in compon...
Post a Comment
Selanjutnya »