String interpolation, property binding, event binding, two-way binding

String interpolation

String interpolation is a way to output data in the HTML template of a component. It is done by using the double curly braces syntax. For example, the following code outputs the value of the title property of the component:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.scss' ]
})
export class HomeComponent {
  title = 'Home';
}

<h1>{{ title }}</h1>

Property binding

Property binding is a way to set the value of an HTML element property. It is done by using the square brackets syntax. For example, the following code sets the value of the src property of the img element to the value of the imageUrl property of the component:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.scss' ]
})
export class HomeComponent {
  imageUrl = 'https://picsum.photos/200/300';
}

<img [src]="imageUrl" />

Event binding

Event binding is a way to listen to events emitted by an HTML element. It is done by using the parentheses syntax. For example, the following code listens to the click event of the button element:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.scss' ]
})
export class HomeComponent {
  handleClick() {
    console.log('Button clicked');
  }
}

<button (click)="handleClick()">Click me</button>

Event binding with parameters

You can also pass the event data to the event handler. For example, the following code passes the event data to the handleClick() method:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.scss' ]
})
export class HomeComponent {
  handleClick(event: MouseEvent) {
    console.log('Button clicked', event);
  }
}

<button (click)="handleClick($event)">Click me</button>

Two-way binding

Two-way binding combines property binding and event binding. It is done by using the square brackets and parentheses syntax. For example, the following code sets the value of the input element to the value of the name property of the component and listens to the input event of the input element:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.scss' ]
})
export class HomeComponent {
  name = 'John Doe';
}

<input [(ngModel)]="name"/>

Property binding vs. string interpolation

Property binding and string interpolation are similar, but there are some differences between them. Property binding is used to set the value of an HTML element property, while string interpolation is used to output data in the HTML template of a component. Property binding is done by using the square brackets syntax, while string interpolation is done by using the double curly braces syntax.

Event binding vs. two-way binding

Event binding and two-way binding are similar, but there are some differences between them. Event binding is used to listen to events emitted by an HTML element, while two-way binding is used to set the value of an HTML element property and listen to events emitted by an HTML element.

Bindable properties and events

You can basically bind to all Properties and Events - a good idea is to console.log() the element you're interested in to see which properties and events it offers.

For events, you don't bind to onclick but only to click (=> (click)).