- String Interpolation: {{data}}
- Property Binding: [property]=”data”
- Event Binding: (event)=”expression”
- Two-Way-Binding: [(ngModel)]=”data”
String Interpolation: {{data}}, in double curly brace, you can use property, expression that will return a string, or method that return string. Remember, in in double curly brace, you can use anything that return a string or can be converted into a string, however, you can’t use if or for statement, or multiline string.
Property Binding: [property]=”data”, all these are base on the element instantiated from the Class, and the data is defined in the class.
Event Binding: (event)=”callback function”
Two-Way-Binding: [(ngModel)]=”data”, this will immediately change data value
Very important tips: for data bingding, angular will evaluate the code between quotation marker as typescript code, so you can write any JS code between ” “, such as variablename === sth, which will be determined true or false.