Binding Property, Styles And Class In Angular

In this article, we are going to learn how to bind property, class, and styles of HTML in Angular.

Prerequisites

HTML, CSS and JS
Basics of TypeScript.
Components

Let us create a sample TestApp. For this, you should have installed the below tools in your development environment:

Node
Npm (comes when you install node)
Angular CLI.
Text Editor.

For creating a new application run the below command at any location.

> ng new TestApp

Create a new component.

> ng g c test

Once your command is completed you will have to TestApp the folder created inside your sample folder.

Now, you will have your project folder called 'TestApp'.

Note
See my previous article “Getting started with Angular CLI” If you want the installation and introduction from the basics and start with the execution of a sample application.

Property binding

HTML attribute vs Dom property
Attribute and property are not the same. The attribute is defined by HTML while the property is defined by DOM. Attribute initializes the DOM property and cannot change once they are initialized. Property can be changed.

Open test.component.html

Add the below code.

<h1>Property Binding in angular!</h1>
<input type="text" value="Mohammad Irshad">

Run the application. Inspect the element input text box.

Binding Property, Styles And Class In Angular

$0 represents the current element and the attribute value is set to the given value.

Let us change the input textbox value and inspect and check the value.

You can see the attribute value is the same as it was initialized but the property value is changed anytime.

Let us add a property value inside the class and use that ID in your HTML.

Open test.component.ts and add the below property.

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
public testId = "test";
constructor() { }
ngOnInit() {
}
}

Open test.component.html and add the below content:

<h1>Property Binding in angular!</h1>
<input type="text" value="Irshad" id={{testId}}>

Run and inspect the element,

You can see the ID set the same as given value in test.component.ts

Better way to bind the property is to enclose the id inside [] bracket and assign that ID to it.

<h1>Property Binding in angular!</h1>
<input type="text" value="Irshad" [id]="testId">

When you inspect this element you will find that this is set as an ID attribute with ‘test’ ID assign to it. This is how we do property binding.

Now, we are going to do the same thing with the help of interpolation.

<input id=”{{testId}}” type=”text” value=”Irshad”/>

Inspect the same browser you will find the same result.

There are certain limitations of Interpolation.

It can only work with string values. Sometimes the situation arises when we need to deal with the Boolean value in the property. Eg: disabled property.

When we define disabled property it automatically initializes it to false.

If we define it like,

<input disabled type=”text”/>
<input disabled=”false” type=”text”/>
<input disabled=”{{false}}” type=”text”/>

Interpolation doesn’t work on Boolean value. So it will not affect on giving it a value.

If we define it like,

<input [disabled]=”false” type=”text”/>
<input [disabled]=”true” type=”text”/>

Then it will be working according to its Boolean value and enable/disable in browser.

Open test.component.ts and add the below content,

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
public testId = "test";
public disableControl = false;
constructor() { }
ngOnInit() {
}
}

Inside test.component.html add the content below-

<h1>Property Binding in angular!</h1>
<input disabled={{disableControl}} type="text" value="Irshad" [id]="testId">

The textbox should not be disabled, as we have defined value of ‘disableControl’ to false just because interpolation is not working with Boolean value. So to make it work add the below content.

<h1>Property Binding in angular!</h1>
<input [disabled]="disableControl" type="text" value="Irshad" [id]="testId">

This time the textbox is not disabled and works with the value assigned to it.

There is an alternative way to bind the property to the element.

You can use ‘bind-‘ prefix with the property name to bind it. We don’t need to use brackets.

<input type=”text” bind-disabled=”disabled” />

This is all about property binding in Angular.

Class Binding

Let us create a CSS class as below.

Open test.component.css and add the below content.

.red{
color:red;
}
.green{
color:green;
}
.blue{
color:blue;
}
.yellow{
color:yellow;
}

The most common way to apply a class is to use ‘class’ attribute.

Open test.component.html and add the below content.

<h1>Class Binding in angular!</h1>
<p class="red">This is p tag with class - red.</p>
<p class="green">This is p tag with class - green.</p>
<p class="blue">This is p tag with class - blue.</p>
<p class="yellow">This is p tag with class - yellow.</p>

In order to bind a class to your HTML from property defined in component class. Declare property in your component class.

Open test.component.ts and add below content.

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
public classRed = "red";
public classGreen = "green";
public classBlue = "blue";
public classYellow = "yellow";
constructor() { }
ngOnInit() {
}
}

Open test.component.html and add the below content,

<h1>Class Binding in angular!</h1>
<p class="{{classRed}}">This is p tag with class - red.</p>
<p class="{{classGreen}}">This is p tag with class - green.</p>
<p class="{{classBlue}}">This is p tag with class - blue.</p>
<p class="{{classYellow}}">This is p tag with class - yellow.</p>

It is better to use [] brackets,

<h1>Class Binding in angular!</h1>
<p [class]="classRed">This is p tag with class - red.</p>
<p [class]="classGreen">This is p tag with class - green.</p>
<p [class]="classBlue">This is p tag with class - blue.</p>
<p [class]="classYellow">This is p tag with class - yellow.</p>

Both will return the same output,

Define class on the basis of condition.

Open test.component.ts and add contents below,

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
public setRed = true;
constructor() { }
ngOnInit() {
}
}

Open test.component.html and add below content.

<h1>Class Binding in angular!</h1>
<p [class.red]="setRed">This is p tag with color red based on condition.</p>

Now, this class will be applied depending on the value true/false of set Red property.

ngClass Directive

This directive is used to apply multiple class to HTML tag element.

Open test.component.css and add the classes below,

.red{
color:red;
}
.bgYellow{
background-color: yellow;
}
.italic{
font-style: italic;
}

Open test.component.ts and add below content,

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
public classObj = {
red : true,
bgYellow : true,
italic: true
};
constructor() { }
ngOnInit() {
}
}

Open test.comonent.html and add below content.

<h1>Class Binding in angular!</h1>
<p [ngClass]="classObj">This is p tag with color red based on condition.</p>

Run the application.

In a classObj object, the ngClass will check which classes are true and need to be applied. It is very useful to add the class dynamically and remove the class whenever not required in HTML based on user requirements. So, in your component class, you will need to specify the properties to apply bases on which the template will be utilizing the class values.

Style Binding

Let us try binding an inline style to the HTML element.

<p [style.color]=”’orange’”> P tag with inline style </p>

We can also bind the inline style on the basis of the condition.

<p [style.color]=”hasColor ? ‘orange’ : ‘green’”> P tag with inline style based on condition </p>

Inside component class declare the ‘hasColor’ property.

Public hasColor = true;

We can also add style object which contains multiple styles.

Open test.component.ts and add the following code,

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
public styleObj = {
"color" : "blue",
"background-color" : "yellow",
"font-style": "italic"
};
constructor() { }
ngOnInit() {
}
}

Open test.component.html and add the following code,

<h1>Class Binding in angular!</h1>
<p [ngStyle]="styleObj">This is p tag with color red based on condition.</p>

Run the application.