Angular 2 html binding

Angular Property Binding Example

On this page we will provide Angular property binding example. Property binding is a one-way data binding from data source to view target. Property binding is performed with component property, HTML element and Angular directives. Component property binding is used for communication between parent and child component because using this binding we can send property values from parent to child component. In element property binding the DOM property of HTML element can be assigned with a value of component property. In directive property binding we can assign component property values to Angular directives.
Component property binding is performed as below.

<my-msg prefixMsg= "Website name is " [siteName] = "website.name"> </my-msg>

<a [href]="website.url" [textContent]="website.name"> </a>

<p [ngClass]="'one two'"> Angular 2 Property Binding Example </p>

Angular framework ensures content security while displaying data. If we try to display data with &ltscript&gt tag then it will not allow. Angular filters the data before display. Angular calls such type of coding not only a HTML but HTML Plus because it is more powerful. Now find the complete example of Angular property binding step-by-step.

Contents

• Software Used
• Property Binding with Diagram
• Property Binding Types and Syntax
• Create Component, HTML Template and CSS
• Component Property Binding
• Element Property Binding
• Directive Property Binding
• Difference between HTML attribute and DOM property
• Create Module
• Run Application
• Reference
• Download Source Code

Software Used

Property Binding with Diagram

The description of diagram is as follows.
1. Angular provides three types of property binding and these are component property binding, element property binding and directive property binding.

2. Component property binding works within component element to bind parent component property into child component property. In the diagram the arrows and rectangles in red color are displaying the functionality related to component property binding.

3. 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.

4. Directive property binding works within HTML element with angular directives such as NgClass and NgStyle . In directive property binding a component property or any angular expression is bound to angular directive. In the diagram the arrows and rectangles in light blue color are displaying the functionality related to directive property binding.

5. In the diagram for the component property binding we have two components. SiteComponent is acting as parent component and MsgComponent is acting as child component. The property website.name from SiteComponent is bound to the property siteName from MsgComponent . So the values of website.name has been copied to siteName . We need to take care that the input property of child component must be decorated with @Input() decorator. The property prefixMsg of MsgComponent has been bound to a constant string using component property binding that is called one-time string initializing.

6. For element property binding demo we are using &ltimg&gt element. The component property website.logo is getting bound to DOM property src of &ltimg&gt element.

7. For directive property binding we are using NgClass . We have two CSS classes .one and .two . In &ltp&gt element we are bounding these CSS classes to NgClass directive using directive property binding.

Property Binding Types and Syntax

Property binding is performed as one-way from data source to view target. In property binding there is source and target. For the example we can define it as [href]=»website.url». Here href is a target that is a property of anchor tag and source is a component property i.e website.url.

Types of Property Binding
In property binding there is source and target. Property binding is performed as one-way from data source to view target. There are three types of property binding.
1. Element property
2. Directive property
3. Component property

Syntax
Property binding target will use the below syntax.
1. Bracket []
2. bind- prefix
3. Interpolation >
We can choose any of the above syntax for property binding that fits to our readability point of view.

Create Component, HTML Template and CSS

import from '@angular/core'; @Component(< selector: 'app-root', templateUrl: './site.component.html', styleUrls: ['./site.component.css'] >) export class SiteComponent < flag = true; website = < name : 'ConcretePage', url : 'http://www.concretepage.com', logo : '/assets/images/logo.jpg', description: 'Learn angular 2 property binding.' >>

Logo: <img [src]="website.logo"/> <br/>Logo: <img bind-src="website.logo"/> <br/>Logo: <img src=">"/> <br/>Url: <a [href]="website.url" [textContent]="website.name"> </a> <br/>Url: <a bind-href="website.url" bind-textContent="website.name"> </a> <br/>Url: <a href=">" textContent=">"> </a> <p [textContent]="website.description"> </p> <p bind-textContent="website.description"> </p> <p textContent=">"> </p> <br/><button [disabled]="flag">Submit</button> <br/><button bind-disabled="!flag">Submit</button> <p [ngClass]="'one two'"> Angular 2 Property Binding Example </p> <p bind-ngClass="'one two'"> Angular 2 Property Binding Example </p> <p ngClass=">"> Angular 2 Property Binding Example </p> <br/><my-msg prefixMsg= "Website name is " [siteName] = "website.name"> </my-msg> <br/><my-msg prefixMsg= "Website name is " bind-siteName = "website.name"> </my-msg> <br/><my-msg prefixMsg= "Website name is " siteName = ">"> </my-msg>

Component Property Binding

We will discuss here component property binding. Using component property binding parent and child component can communicate. The parent component property as source is bound to child component property as target in component property binding. We will understand component property binding step by step.

A. In parent component site.component.ts we have a property as follows.

B. For the demo we will send website.name property to child component.
Find the child component and its HTML template.
msg.component.ts

import from ‘@angular/core’; @Component(< selector: 'my-msg', templateUrl: './msg.component.html' >) export class MsgComponent

We will observe in child component that prefixMsg and siteName properties have been decorated with @Input decorator. @Input is responsible to decorate a component property as input property that will be bound with parent component property to accept values from parent.

C. Now for component property binding, in site.component.html we are creating a tag with my-msg that is selector of child component. Component property binding can be performed in following ways.
1. Using bracket []

<my-msg [siteName] = "website.name"> </my-msg>

<my-msg bind-siteName = "website.name"> </my-msg>

<my-msg siteName = ">"> </my-msg>

D. In this way website.name property value from site.component.ts has been copied into siteName of msg.component.ts . This is component property binding.

E. One-time string initialization
We can also perform one-time string initialization. In this type of initialization we do not use [ ], bind- or interpolation. But we need to take care that target will accept string only which is fixed and will not change. In the below code snippet prefixMsg is being used as one-time string initialization.

<my-msg prefixMsg= "Website name is " > </my-msg> <my-msg prefixMsg= "Website name is " [siteName] = "website.name"> </my-msg>

Element Property Binding

Here we will discuss HTML element property binding.
1. Using bracket [ ]
Find the property binding in HTML element &ltimg&gt, &lta&gt, &ltp&gt and &ltbutton&gt.

<img [src]="website.logo"/> <a [href]="website.url" [textContent]="website.name"> </a> <p [textContent]="website.description"> </p> <button [disabled]="flag">Submit</button>

The targets such as src, href, textContent and disabled properties has been enclosed within bracket [ ]. Source is a component property. The src of &ltimg&gt tag has been assigned with the value of website.logo . In the same way href of anchor tag has been assigned with value of website.url and textContent has been assigned with the value of website.name and same in &ltp&gt tag. In Angular framework disabled property can be assigned with true and false value which in normal HTML coding it does not work.

2. Using bind-
Find the element property using bind-. We just have to add it as prefix with element properties as follows.

<img bind-src="website.logo"/> <a bind-href="website.url" bind-textContent="website.name"> </a> <p bind-textContent="website.description"> </p> <button bind-disabled="!flag">Submit</button>

<img src=">"/> <a href=">" textContent=">"> </a> <p textContent=">"> </p>

Directive Property Binding

Property binding can also be achieved for Angular directives. In our example we are using ngClass directive. We are assigning CSS classes. For the example we have two CSS classes i.e. .one and .two .
1. Using bracket [ ]
Find the directive property binding using [ ].

<p [ngClass]="'one two'"> Angular 2 Property Binding Example </p>

<p bind-ngClass="'one two'"> Angular 2 Property Binding Example </p>

<p ngClass=">"> Angular 2 Property Binding Example </p>

Difference between HTML attribute and DOM property

Template binding works with properties and events but not attributes. In angular framework, attribute binding is achieved using prefix attr. such as [attr.colspan]. Let us understand the differences between HTML attribute and DOM property.
1. Attributes are defined by HTML and properties are defined by DOM.
2. The responsibility of HTML attributes is just to initialize DOM properties. And then later DOM properties can change but HTML attributes cannot.
3. There are some HTML attributes that have corresponding DOM property and those DOM properties have corresponding HTML attributes such as id.
4. There are also some HTML attributes that do not have corresponding DOM property such as colspan.
5. There are also some DOM properties that do not have corresponding HTML attributes such as textContent.
6. The HTML attribute value contains initial value whereas DOM property value contains current value.

Create Module

import from ‘@angular/core’; import from ‘@angular/platform-browser’; import from ‘./site.component’; import from ‘./msg.component’; @NgModule(< imports: [BrowserModule], declarations: [SiteComponent, MsgComponent], bootstrap: [SiteComponent] >) export class AppModule

Источник

How to bind static variable of component in HTML in angular 2?

I want to use a static variable of a component in HTML page. How to bind static variable of component with a HTML element in angular 2?

import < Component, OnInit >from '@angular/core'; import < Observable >from 'rxjs/Rx'; @Component(< moduleId: module.id, selector: 'url', templateUrl: 'url.component.html', styleUrls: ['url.component.css'] >) export class UrlComponent < static urlArray; constructor() < UrlComponent.urlArray=" Inside Contructor" >> 

6 Answers 6

The scope of binding expressions in a components template is the components class instance.

You can’t refer to globals or statics directly.

As a workaround you can add a getter to your components class

export class UrlComponent < static urlArray; constructor() < UrlComponent.urlArray = "Inside Contructor"; >get staticUrlArray() < return UrlComponent.urlArray; >> 

If HTML has for loop then ? I have loop which access the component static variable.. If I use «let person of persons()» it doesnt work. Here persons method return multiple person.. getting «TypeError: self.context.persons is not a function» error

No, you most definitely do not need () on a getter, and shouldn’t have it there. get staticUrlArray() <> is not public staticUrlArray() <> One is accessed directly like staticUrlArray , the other as a method like staticUrlArray() .

To avoid Angular calling get staticUrlArray at each cycle, you can save a class reference in the public scope of the component:

export class UrlComponent < static urlArray; public classReference = UrlComponent; constructor() < UrlComponent.urlArray = "Inside Contructor"; >> 

And then you can use it directly:

For a simple variable I was using for the state of a checkbox, this method avoided dozens of calls to the get function. If used within a loop (e.g. rows of a table) that could really be detrimental. I’d say this is the better answer and the syntax is a bit simpler.

This is a very interesting solution. Declaring a reference to a class within the class itself seems kind of odd. But it does work in Angular.

You can also just declare a field of the class type, as such:

export class UrlComponent < static urlArray; UrlComponent = UrlComponent; constructor() < UrlComponent.urlArray=" Inside Contructor" >> 

You can then reference static variables using this prefix:

This also works / is necessary to reference stuff like Enums or objects like console directly in your template.

@BogdanD, indeed, with the small difference that I use «UrlComponent = UrlComponent» as I find this to be more expressive than using a generic «classReference» that doesn’t show which class we’re talking about. Also, I answered in March while mithus7 answered in April. Looking at it, I noticed that I had a typo in the template, fixed that.

Источник