Shulou(Shulou.com)06/02 Report--

This article is about how to customize two-way data binding in Angular. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article.

@ Input binding

For a component, it defines the attributes identified by @ Input (), which are used to receive the value of attribute in the corresponding html tag. Such as:

/ / define custom in component

@ Input () custom: string

/ / used in tags

In this way, you can assign a value to custom in component, with the content "dawang". This is only a static assignment, and there is no data binding. One-way binding of data is to use [], such as:

Where data is a variable defined in the ts file, suppose you assign a value to data: data='dawang', through the one-way binding of data [], the value of custom in component is' dawang', rather than data. Data binding is a variable, and the contents of the variable can be passed into the component by binding.

@ Output binding

Since it is a two-way binding, if you have input, you must have output.

The EventEmitter object identified by @ Output can be defined in the component of angular. Such as:

@ Output () update = new EventEmitter ()

You can use it like this in html

/ / define the doUpdate method in ts

DoUpdate (event:any) {

/ / do something

}

At this time, the update is used as a reverse binding property to bind the doUpdate to the update to receive the value of the update coming from the component. The value passed by update needs to be triggered manually.

This.update.emit ('ok')

When triggered manually, you can get this value in doUpdate, where the value of event is' ok'.

So far, we have seen the forward and reverse binding of angular data, but the two are separate, so they are both called one-way binding, so how can two-way binding be done?

Two-way binding

At the same time, using] is the way to achieve two-way binding, while using two-way binding, you also need to modify component.

@ Input () custom: string

/ / add the following output bindings

@ Output () customChange = new EventEmitter ()

In this way, the bidirectional binding of [(custom)] can be realized. Through the component code, it can be found that [(custom)] is equivalent to

The above is how to customize two-way data binding in Angular. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.