Javatpoint Logo
Javatpoint Logo

Angular7 Property Binding

In Angular7, property binding is used to pass data from the component class (component.ts) and setting the value of the given element in the user-end (component.html).

Property binding is an example of one-way databinding where the data is transferred from the component to the class.

The main advantage of property binding is that it facilitates you to control elements property.

For example

We are going to add a button to "component.html" page.

component.ts file:

Output:

Angular7 Property Binding

Let's see how property binding works?

First, we are going to disable the button by using disabled attribute.

Now, the button is disabled.

Let's add a new property "allowNewServer" in "component.ts" file which will disable the button automatically but after a specific (settable) time.

component.ts file:

component.html file:

Here, we set a time of 5000 millisecond or 5 second. After 5 seconds, the button will be disabled automatically.

This is an example of property binding where a property is bound dynamically.

Output:

Angular7 Property Binding

By using the above code, you can allow the disabled button after 5 seconds automatically.

Property Binding vs. String Interpolation

We can use property binding as well as string interpolation for databinding cases. For example, let's add string interpolation in the above example.

Here, <h3>{{allowNewServer}}</h3> specifies string interpolation.

Output:

Angular7 Property Binding

We can do the same task by using property binding also.

Example:

Output:

It will also give you the same result:

Angular7 Property Binding

But, string interpolation has some limitation. Later, we shall learn where to use string interpolation and where property binding.


Next TopicAngular7 Pipes




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA