Angular 8 2020 | Property binding #8

Показать описание

Property binding flows a value in one direction, from a component's property into a target element property.

You can't use property binding to read or pull values out of target elements. Similarly, you cannot use property binding to call a method on the target element. If the element raises events, you can listen to them with an event binding.

HTML Attribute vs DOM Property
The distinction between an HTML attribute and a DOM property is important in understanding binding in Angular.

HTML is a set of written instructions for how to display a web page.

The browser reads the HTML and creates something called a DOM, a Document Object Model. This is the manifestation of those HTML instructions in memory.

Changing the HTML doesn’t automatically update the webpage unless the user refreshes the browser, changing the DOM however instantly updates the webpage.

There is mostly a 1-to-1 mapping between the names and values of HTML attributes and their equivalent DOM properties, but not always.

The hidden HTML attribute is a good example, it only needs to exist on an HTML element to instruct the browser to hide the element.

So hidden="true" hides the element but confusingly so does hidden="false" in HTML we just need to add hidden to hide the element.

The DOM representation of the hidden attribute is a property also called hidden, which if set to true hides the element and false shows the element.

Angular doesn’t manipulate HTML attributes, it manipulates DOM properties because the DOM is what actually gets displayed.

So when we write [hidden] we are manipulating the DOM property and not the HTML attribute.

This is why the above is called Input Property Binding and not Input Attribute Binding.

The target inside [] is the name of the property. The text to the right of = is JavaScript code that gets executed and the resulting value is assigned to the target.
#angular #property_binding
@Codevolution @HiteshChoudharydotcom @CheezyCode