List of all bindings in angular

In Angular, bindings are used to establish communication between components and templates. There are several types of bindings available in Angular. Here’s a list of the commonly used bindings:

1. Interpolation ({{...}}): Used to bind a component property or expression to a placeholder in the template. For example: <h1>{{ title }}</h1>
2. Property binding ([property]="..."): Used to bind a component property to an element property. For example: <input [value]="name">
3. Event binding ((event)="..."): Used to bind an event from the template to a method in the component. For example: <button (click)="save()">Save</button>
4. Two-way binding ([(ngModel)]="..."): Used to establish a two-way data binding between a form control element and a component property. Requires importing the FormsModule. For example: <input [(ngModel)]="name">
5. Class binding ([class.class-name]="..."): Used to conditionally apply a CSS class to an element based on a component property. For example: <div [class.error]="isError">Error message</div>
6. Style binding ([style.style-name]="..."): Used to conditionally apply a CSS style to an element based on a component property. For example: <div [style.color]="isError ? 'red' : 'green'">Status message</div>
7. Attribute binding ([attr.attribute-name]="..."): Used to bind a component property to an element attribute. For example: <input [attr.disabled]="isDisabled">
8. Template reference variable (#variableName): Used to create a reference to an element or component in the template and access its properties or methods. For example: <input #inputRef> or <app-child-component #childRef></app-child-component>

These are the main types of bindings in Angular that allow you to establish dynamic communication between your components and templates.