What is data-bound properties?

Question

I am trying to understand OnInit functionality in angular2 and read the documentation:

Description

Implement this interface to execute cu

Answer 1

When you 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>

This make name a data-bound property.

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 more details see https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

@Input is a decorator that makes a class field as an input property and supplies configuration metadata. The input property is bound to a DOM property in the template. During change detection, Angular automatically updates the data property with the DOM property's value.

I hope this answer may help to understand this concept.

Above example contains name as an input which is bound as property for component in DOM structure & angular updates it based on changes.