Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Property binding in Angular 8

Property binding is the primary way to binding data in Angular.  To bind data to a property of any element, we use square braces[ ]. It is also a one-way data-binding technique. In property binding, we link property of a DOM element to a field. Angular internally converts string interpolation into property binding.

When a value in the data is change and update the view to reflect the changes it is detected by the Property binding, hence making the HTML dynamic.

Property binding is used to pass data to a component.

For example:

Property binding favor over string interpolation because it has short code. Which can be used when we want to display some dynamic data from a component on the view between headings. like h1, h2, p etc.

Property binding in Angular 8

There are three types of property binding:

1. Component property binding

2. Element property binding

3. Directive property binding

Component property binding

It workswithin the component element to bind parent component property. In the diagram, the arrows and rectangles in red color are displaying the functionality related to component property binding.

Element property binding

Element property binding works within HTML element, and it binds a component property to a DOM property. In the diagram, the arrows and rectangle in green color are displaying the functionality related to element property binding.

Directive property binding

It also works within HTML element with directives such as Ngclass and NgStyle. In the directive, property binding a component properly or any angular expression is linked to the angular directive.

Property Binding Example

Open the app.component.ts file and add the below code:

import {component} from ‘@angular/core’;
 @Component ({ 
 selector: ’app-root’, 
 templateUrl:’./app.component.html’, 
 styleUrls: [‘./app.component.css’] 
 }) 
 export class AppComponent { 
 title= “Data binding using Property Binding”; 
 imgUrl=https://server5.kproxy.com/servlet
/redirect.srv
/sruj/scxtachplrb/swdpxrr/p2/tutorial/angular7/images/angular-7-logo.png; 
} 
Angular 8 Property binding

Now, open app.component.html and use the below code for property binding

{{title}}

Angular 8 property

Run the ng serve command and open localhost 4200 to see the result.

Angular 8 Data binding using Property Binding



ADVERTISEMENT
ADVERTISEMENT