What Is an Angular Component?

Components are like the basic building block in an Angular application. An Angular app contains a tree of Angular components.

It contains #binding and #interpolation in Angular App

A component is just a class that serves as a controller for the user interface. It consists of three parts – some TypeScript code, an HTML template, and CSS styles.

For more

a) Binding

In angular binding is just a way to connect data from TypeScript to the HTML view. We can use square brackets [] to bind in angular.

This is the example like we can disable a button after it has been clicked.

@Component(...)
export class SomeComponent {
  clicked = false
}

<button [disabled]="clicked"></button>

In other way we can use () parenthesis to bind the action. Let’s try the method to change the “Clicked” property to false – This is the very basic event handling in Angular.

@Component(...)
export class SomeComponent {
  clicked = false;

  handleClick() {
    this.clicked = true;
  }
}

<button [disabled]="clicked" (click)="handleClick()"></button>

b) Interpolation

Interpolation markup with embedded expressions is used by Angular to provide data-binding to text nodes and attribute values.

An example of interpolation is shown below:

<code class="lang-html"><a ng-href="img/{{username}}.jpg">Hello {{username}}!</a></code class="lang-html">

to be Continue…