Angular: What is meaning of Data-bound properties?

Question

In Angular Documentation I frequently found the word data-bound properties, but meaning of that I searched in google and found

What is data-bound properties?

It not fully explained in the answer. Under the answer people still questioning. If it is accepted answer, it won't mean it is correct answer. Can Some One explain more detail?

Answer 1

If have a component

@Component({
  selector: 'my-component'
})
class MyComponent {
  @Input() name:string;

  ngOnChanges(changes) {
  }

  ngOnInit() {
  }
}

you can use it like

<my-component [name]="somePropInParent"></my-component>

When the value of somePropInParent was changed, Angulars change detection updates name and calls ngOnChanges()

After ngOnChanges() was called the first time, ngOnInit() is called once, to indicate that initial bindings ([name]="somePropInParent") were resolved and applied.

For details see https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

You should go with Angular Docs again.

Angular docs on property binding

In case you need some explanation. Data bound properties are simple attributes in HTML template which you are binding with property in your component. The very basic of this is interpolation where you can use {{property}} . The binding sets the property to the value of a template expression. let say you have a property yourImageUrl in your component then you can use this with src to assign the value to src . [property] is one way bound because u can only set this. <img [src]="yourImageUrl">

you can also use One-time string initialization if you know your value will never change.

If you want your component to getValue from your template then you need to use two way binding or event binding then you need to use something like [(property)] .