Hi everyone, in this article I will share with you a summary of what I learned about angular html template-sytax.
INTERPOLATION
It is one of the Angular One-Way Data Binding methods. It is commonly used to show the value returned by a variable or method in a component or service in an HTML template. A variable or method is written inside curly braces.
We can use values of variables, values of objects, elements of arrays, mathematical operations, ternary operators, pipes in interpolation brackets.
{{ variableName }} or {{ getVariableName() }}
Sometimes variables can initially be null or undefined. To avoid the error in angular, We use the “?” operator.
<p> {{ clientData?.salesCount }} </p>
PROPERTY BINDING
In fact, the string interpolation we described above eventually turns into a property bind. It is written in square brackets within the html tag.
[innerhtml]="personName". or [src]="client.profilePhotoUrl"
EVENT BINDING
Event Binding allows us to listen to keyboard key clicks, mouse movements, taps. In Angular, we can create an event binding ourselves.
(event)="myHandler($event)"
TWO WAY DATA BINDING (BANANA IN A BOX)
One of my favorite features of Angular is Two Way Data Binding. It allows us to change a variable in both Html(<input/>) side and component.ts side. To use this feature, you must import FormsModule to the relevant module.
[(NgModel)]=”person.name” or [(NgModel)]=”person.age”
ANGULAR PIPES
In Angular, we may want the variables on the HTML side to appear more meaningful to the end user. For example, we may want to add currency in front of numbers.
DIRECTIVES
Directives are used to create or change the appearance or behavior of an HTML element. Components are directives. It also has Attribute and structural directives.
STRUCTURAL DIRECTIVES
*ngFor Structural Directive
*ngIf Structural Directive
ngSwitch Directive
ATTRIBUTE DIRECTIVES
[ngClass]
[ngStyle]
[class.MyClass]
[style.width]
ELEMENT REFERENCE ID
In a template, we can name HTML elements individually and use those names elsewhere to access the element. Such element references are indicated by a hash symbol #.