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 custom initialization logic after your directive's data-bound properties have been initialized.

ngOnInit is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated.

I do not understand directive's data-bound properties what does it mean?

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.

Answer 3

Reading the Docs, we note:

ngOnChanges():

"respond when Angular sets or resets data-bound input properties"

it will not be called if your component

"has no inputs or you use it without providing any inputs"

On ngOnInit method, we can also see that ngOnChanges() is not called when

"there are no template-bound inputs"

Finally, ngOnInit():

"initialize the directive or component after Angular first displays the data-bound properties and sets the directive or component's input properties."

Suming up, data-bound and input properties and template-bound inputs are all just an alias for the same thing, or as @GünterZöchbauer points, they are just "inputs".

Answer 4

The question "What are data-bound properties" is indeed relevant.

A data-bound property, as @Bhargav Rao points out, can be any property / field of the component's class whose value is passed to the template, regardless of "how it looks like".

A data bound property can be:

• A field of the class that is passed to an attribute of an HTML element, e.g. isUnchanged => [disabled]="isUnchanged"

• A field of the class that is passed to an ngModel, e.gl name => [ngModel]="name"

• A field of the class that happens to be an input property (i.e., it is preceded by an @Input decorator)

Possibly also, an output property (not sure about this last one).

BTW, Angular docs fells short of clarity and preciseness on this subject.

Hope this helps.

Answer 5

@Sasuke Uchiha, @Input and data-bound properties are indeed the same. Please read the line "Keep in mind that a directive's data-bound input properties are not set until after construction. If you need to initialize the directive based on those properties, set them when ngOnInit() runs" at https://angular.io/guide/lifecycle-hooks

PS: Cant comment on the answer, so replying this way

Answer 6

From Angular Glossary:

In data binding, you declare the relationship between an HTML widget and a data source and let the framework handle the details. Data binding is an alternative to manually pushing application data values into HTML, attaching event listeners, pulling changed values from the screen, and updating application data values.

Forms of data binding include:

• Interpolation
• Property binding
• Event binding
• Attribute binding
• Class and style binding
• Two-way data binding with ngModel

To bind a property you enclose it in square brackets, [], which identifies the property as a target property. Target property may be name of an attribute, an input property of a component/directive. The brackets are needed if right-hand side of assignment is wanted to be a dynamic expression. Without them, Angular treats the right-hand side as a string literal and sets the property to that static value.

Answer 7

data-bound properties are just properties of the class