Presents the IO/guide/prope…

Property binding in Angular helps you set values for properties of HTML elements or directives.

Property binding is used to set values for HTML elements or Directive attributes.

The metadata for a component tells Angular where to get the major building blocks that it needs to create and present the component and its view. In particular, it associates a template with the component, either directly with inline code, or by reference. Together, the component and its template describe a view.

Component, along with template, describes a view.

directives: apply app logic to what gets displayed.

Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Writing such push and pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced front-end JavaScript programmer can attest.

<li>{{hero.name}}</li>
<app-hero-detail [hero] ="selectedHero"></app-hero-detail>
<li (click) ="selectHero(hero)"></li>
Copy the code
  • The first use displays the value of the Component hero.name property in the li element.
  • The second use is to pass selectedHero, the hero-list Component property, to the Hero property of the HeroDetail Component. This is value passing from Component property to Component property.

Third, when the user clicks on the hero name, the selectHero method in the Component is triggered.

Angular also has a useful bidirectional binding mechanism:

In two-way binding, a data property value flows to the input box from the component as with property binding. The user’s changes also flow back to the component, resetting the property to the latest value, as with event binding.

Angular templates are dynamic, and when the template is rendered, the DOM is converted according to the instructions in the template.

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive() decorator.

A component is technically a directive. Angular defines the @Component() decorator, which extends the @Directive() decorator with template-oriented features.

Component is technically a Directive that extends a set of template-oriented features.

More of Jerry’s original articles can be found in “Wang Zixi” :