Question

11) How to bind property?

Answer 1

`Hey,

Note: Brother if you have any queries related the answer please do comment. I would be very happy to resolve all your queries.

Property binding is the primary way of binding data in Angular. The square braces are used to bind data to a property of an element, the trick is to put the property onto the element wrapped in brackets: [property].

class {
    this.srcURL = "http://pexels/image.jpg"
}<img [src]="srcURL" />
    |
    |
<img src="http://pexels/image.jpg" />

The src property of the HTMLElement img is bound to the srcURL property of the class. Whenever the srcURL property changes the src property of the img element changes.

Also, property binding could be used to pass data to a component. Let’s say you want to pass data to people component, we will do something like this:

@Component({
  selector: 'app-root',
  template: `
  <people [person]="title"></people>
    <button (click)="changeTitle()">ChngTitle</button>
  `,
  styles: []
})
export class AppComponent {
  title = 'app';
  constructor(){}  changeTitle() {
    this.title = 'Angular app'
  }
}

Kindly revert for any queries

Thanks.