Databinding in Angular

Definition

• Databinding = communication
• Communication between the TypeScript code of your
  • component,
  • business logic &
  • template
• Using databinding you can
  • output data
  • respond to the user by event biding
  • two-way databinding (respond as well as out output data)

String Interpolation

• Any expression that returns a string
• Example: {{property}}

Property binding

• [] indicate a property is being bound
• Example:

[disabled]

= “propertyName (has to be a TypeScript expression)

• Can bind to all the HTML properties

String Interpolation vs Property binding

• If you want to print out an output to the webpage, use string interpolation.
• If you want to change the property of an attribute, use property binding.

Event Binding

• Binding a function to a event that will occur when a user interacts with the webpage
• (Event_Name) = “Method to be used“
  
  

Two-way Binding

• It is the way to change the input as well as output data at the same time
• Example: [(ngModel)] = “property”

Directives

ngIf

• Use * to represent that it is a structural directive. A structural directive is a directive that changes the structure of the angular project
• Example: <p*ngIf = “property that returns true/false”> whatever text </p>
• Else
  • Or use ngIf with a reverse alternative
    • Example: <p*ngIf = “!property that returns true/false”> …. </p>
  • Create a ng-template
    • <ng-template #any_name>  HTML code <ng-template>
    • Example: <p*ngIf = “property that returns true/false”; else any_name> whatever text </p>

ngStyle

• Use [] on the directive in order to configure using property binding
• Pass a JavaScript object to configure ngStyle
• Example: <p [ngStyle] = “{JavaScript syntax: methodName()}”> …. </p>

ngClass

• Allows dynamic use of CSS classes
• Use [] on the directive in order to configure using property binding
• Example: <p [ngClass] = “Class_Name: some condition”
• ngClass will only add that class if a certain statement is true

ngFor

• It is used as a loop
• Example: <p *ngFor = “let anyName of array_from_component; let i = index”> …. </p>
  • Let any variable read from an array defined in the component class

Debugging

• Using the console
• Error in your logic
  • Go to sources
  • TypeScript can be found in the webpack
  • The browser cannot read TypeScript so it transforms it into JavaScript
  • Place breakpoints where the error could be
  • Run the code and see how the values change to find the error
• Augury