what is property binding in Angular 4

Posted by

https://youtu.be/KdOK6JWowbI

what is property binding in Angular 4

Welcome to another lesson of Angular 4 by PodinaTutorials.com. Here in this lesson, we are going to discuss, what is property binding in Angular 4. So Property binding is a term and is defined as, updating the value of a specific variable in component (i.e.) Model and display it in view, which is presentation layer.

Let’s elaborate it now. Property Binding means you are passing some sort of data from the component class to an element in the view. The good thing about property binding is that it allows to control element property values from component and can be changed whenever needed in the project.

Now we are going to implement an example for further understanding. Let’s take a look;

Actually, there are a total of three ways to define property binding in Angular 4, They are:

<!-- first way -->

<div bind- class =" content-background">
// some code here
</div>

<!-- second way -->

<div class="{{content-background}}">
// some code here
</div>

<!-- third way -->

<div [class]=" content-background ">
// some code here
</div>

The first way to define property binding is by adding bind- before the element property.

The second way is to use interpolation {{}} to define the value, as long as the value you are defining is a sting.

The third way to define property binding is by wrapping brackets [] around the element.

what is property binding in Angular 4
what is property binding in Angular 4

Example

content.component.html

<div class="{{class_property}}">

<h1> Content Starts </h1>
<p> The Content Para </p>

</div>

content.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-content,
templateUrl: './content.component.html',
styleUrls: ['./content.component.css'] })

export class ContentComponent {

class_property = “content-background”;

}

Here in the above example, you can see that in the content.component.html file we take a <div> tag with a class = "{{class_property}}"> which is a single variable in  the content directory file content.component.ts. If you look to the content.component.ts file, you can see the variable named class_property which is assigned to content-background.

Also Read  How to Run First Application in Angular 4

You can also take the <div> tag as;

<div bind- class ="class_property">

<h1> Content Starts </h1>
<p> The Content Para </p>

</div>

And also like this;

<div [class]="class_property">

<h1> Content Starts </h1>
<p> The Content Para </p>

</div>

Conclusion

As you see above; there are multiple ways to bind a property in Angular 4. Here in this lesson, you learned three ways to bind a property in Angular 4. The first way is by putting a variable in {{variable}}, the second ways are putting bind- before class, and the third way is to put a class in brackets [class]. In this lesson, you have learned that property binding allows you to define element attribute values from component class and also learned that it is a one-way data binding, as you can see that we only set data from component to the view.

Other topics you may also like

Book Suggested

Beginning Angular with Typescript (updated to Angular 5)

This book is for developers with basic familiarity with HTML, CSS, Javascript and object-oriented programming. No TypeScript or AngularJS experience needed.

Related Keyword

property binding angular 4
angular 4 two way binding
event binding in angular 2  in angular 2
angular 4 data binding
angular 4 binding
angular 2 binding
angular 2 component properties
angular 2 template reference variable

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *