What is Databinding?
You called basically translate Databinding with communication.
Communication between your typescript code and the template. Data binding deals with how to bind your data from component to HTML DOM elements (Templates). Data binding automatically keeps your page up-to-date based on your application's state. You use data binding to specify things such as the source of an image, the state of a button, or data for a particular user. Developers can customize HTML by specifying attributes with string values.
Types of Databinding :
1. String interpolations
In general, String interpolation is the process of formatting or manipulating strings. In Angular, Interpolation is used to display data from component to view (DOM). It is denoted by the expression of {{ }} and also known as mustache syntax.
2. Property binding
Property binding is used to bind the data from property of a component to DOM elements. It is denoted by [].
What is NgIf-directive?
A structural directive that conditionally. When the expression evaluates to true, Angular renders the template provided in a then clause and when false or null, Angular renders the template provided in an optional else clause.
A shorthand form of the directive, *ngIf="condition"
How to create NgIf - directive?
For the example we want to create a radio button click and it’s show the different data when we click that button
1. Create new property and set a data type of Boolean
2. Create new function and add the property that we create in it
- OnHahalaw function we will set the value is true
- OnPersonallaw function we will set the value is false
3. Back to the template we will add them as follows.
What is NgFor-directive?
A structural directive that renders a template for each item in a collection.
The directive is placed on an element, which becomes the parent of the cloned templates.
A shorthand form of the directive, *ngFor="let itemof list"
How to create NgFor - directive?
For the example we want to show 4 data as follows…
We right now manually add these element 4 times. It would be nicer to use a NgFor
1. Create a new property name colors equal to an array of data that you want to show
2. Back to the template create a div tag we attach the NgFor directive and this directive begins with *NgFor = let color of colors
- colors is a data list which the array of colors
- color is referred to each item during the iteration
How it’s syntax works?
- Find colors which the data source for the loop
- color refers to one item in the array, first iteration it's a Red, second a Blue, third a green and last a Yellow
- div tag get renders in each iteration of the loop and show the data
