Implement Attribute, Class, and Style binding in Angular

iFour Team -July 20, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

Implement Attribute, Class, and Style binding in Angular

What is binding in Angular?

Binding in angular apps is the automatic synchronization of data within the model and view components. You can use data binding to define things like the state of a button, the source of an image, and data for a particular user.

Attribute binding

Attribute binding in Angular helps you to set values for attributes absolutely and with attribute binding, you can upgrade the accessibility, style of your web application dynamically, and administered multiple CSS classes

It is suggested that you set an element property with a property binding at any time possible. However, at times you don’t have an element property to bind then you can use attribute binding.

Attribute binding syntax looks like property binding, but except for an element property within brackets, you can write the name of the attribute with the prefix attr. Then you can set the attribute value with an expression.

Syntax

ARIA Attributes

One of the main use cases for attribute binding is to set ARIA attributes, let’s see in example:

Colspan attribute

Another use case of an attribute binding is with the colspan attribute in tables. Binding in the colspan attribute helps you hold on to your tables programmatically dynamic. It depends on the amount of data that your application populates a table with the number of columns that a row spans could change.

Attribute binding is used with the attribute in colspan:

Describe the colspan attribute by using this syntax: [attr.colspan]
Set [attr.colspan] equal to colspan attribute expression.

Now we bind the colspan attribute to the expression 1+2.

One-Two-Three

This binding because of the to span three columns.

Note: Many times there are differences between the name of property and an attribute. In our code colspan is an attribute of and colSpan with capital “S” is a property. When using attribute binding we use colspan with lowercase “s”.

Read More: Authentication With Json Web Token In Angular

Class Attribute Binding

We can use class binding to remove and add CSS class names from an attribute.

Single CSS Class Binding

Now we create a single class binding with use prefix class describe a dot and the name of the CSS class following syntax:

[class.list]=”expressionName”

In Angular, when an expression is truth then it adds the class otherwise it removes the class when the expression is false with the exception of undefined.

Input type in single class binding boolean | undefined | null.

The Input value is true or false.

Multiple CSS Class Binding

Now we can bind to multiple classes with the use of [class] set to an expression for example:

[class]=”classExpression”

The expression can be one of the below:

A space-determine string of class names.
The expression of an array of class names.
Expression an object with class names as keys and truth or false expression as the value.

In Angular, when an expression is truth then it adds the class otherwise it removes the class when the expression is false.

In multiple CSS classes with any object-like expression like an array, map, set, or object the identity of the object must change for angular to update the class list.

In Angular multiple binding to the same class name so in this case, we use styling precedence to determine which binding to use.

Examples:

Input type string and input value is “class-1 class-2 class-3”.
Input type Record and input value is {foo: true, bar: false}.
Input type Array and input value is [‘foo’, ‘bar’].

Style Attribute Binding

We can use style attribute binding to set style dynamically.

Single Style Binding

Now, we create a single style attribute binding with use of prefix style followed by a dot and the name of CSS style property like below syntax:

[style.styleProperty]=”styleProperty”

Angular sets the property to the value of the expression, which is mainly in string. And you can also add optionally unit extension like em or %, and which requires a number type.

You can also write a style property name in either dash-case or camelCase.

Example of single style binding:

In single style binding syntax [style.width]=”width”, input type is string | undefined | null, and input values is “150px”.

In single style bindings with units syntax [style.width.px]=”width”, input type is number | undefined | null, and input values is 150.

One-stop-oplossing voor Angular-webontwikkeling ? Uw zoekopdracht eindigt hier.

Reach out us

Multiple Style Binding

To switch multiple style attribute, we bind to the [style] attribute. For example, [style]=”style expression” and the style expression can be one of below style :

1. List of styles as a string such as “height: 150px; width: 150px; background-color: light;” .
2. Style values as a value and an object with style names as the keys, such as {height: ‘150px’, width: ’150px’, backgroundColor: ‘light’}.

In angular binding, an array to [style] is not supported.

Example single and multiple style binding:

@Component({
  selector: 'app-navbar',
  template: `Home Page Login` }) 
export class NavBarComponent { navbarStyle = 'font-size: 1.2rem; color: light;'; linkStyle = 'underline'; activeStyle = 'overline'; }

In Angular multiple binding to the same style attribute so in this case, we use styling precedence to determine which binding to use.

In multi-style binding syntax [style]=”styleExpression”, input type is string, and input value is “width: 150px; height: 150px;”.

Conclusion

In this blog, we have seen what is attribute, class, and style binding in Angular and we have implemented attribute, class, and style binding in the Angular application. The attribute, class, and style binding are a part of property binding. These are the important concepts that help you to increase your grip on Angular.