How to add conditional attribute in Angular 2?

The great divide: Attribute vs. Property bindings

In your HTML adventures, you might have noticed that attributes and properties aren't always the same. Angular also acknowledges this distinction. Take, for instance, the attribute value on an input form element. While the attribute sets an initial value, the value property is all about the current value.

Using [attr.xxx]="..." allows Angular's built-in magic to synchronize the attribute with a corresponding DOM property, if one exists. No extra work on your part, hooray! 🎉

Comparing direct property binding and attribute binding

There are cases, especially with form elements, where direct property binding offers more functionality than attribute binding. For example, a checkbox's 'checked' status can be efficiently handled this way:

<input type="checkbox" [checked]="condition">


// Checkbox be like: "My fate lies in the hands of condition"

Yet for attributes that don't correspond to any DOM property or when dealing with attributes specifically, [attr.xxx] syntax comes to the rescue. Here's how you conditionally set data attributes (that lack corresponding properties):

<div [attr.data-custom]="condition ? 'value' : null"></div>


Binding attributes that don't hold values, like boolean attributes, requires a unique treatment. Set them to 'true' or an empty string to add them, and null to usher them out:

<button [attr.disabled]="isDisabled ? '' : null">Maybe I'm clickable, maybe not!</button>


Gaining control with conditional expressions

Bringing in different conditional expressions in your attribute bindings can enhance behavior dynamics. Less unwieldy logic in your components – definitely a Tuesday goal.

Think about setting aria- attributes to increase accessibility:

<div [attr.aria-expanded]="isOpen ? 'true' : 'false'"></div>


// <div> be like: "Are we open today? Check my aria-expanded attribute for the latest update"

Expanding these nuances opens a world of customizable attribute directive combinations, keeping Angular versatile for your web app needs.

Keeping pace with Angular's attribute handling

Angular's approach to attribute handling has evolved over time. Anyone remember the NgAttr or NgChecked directives? They're now on Angular's retired list, replaced by more streamlined binding syntax.

To stay on top of the attribute binding scene, make sure to check Angular's official documentation. Especially for those pesky complex attribute binding scenarios you might run into!

Real-life problem solving with conditional attributes

The NgClass directive: Juggle classes based on conditions

To juggle classes based on conditions, we whip out NgClass often:

<div [ngClass]="{'active': isActive, 'disabled': !isActive}"></div>


// <div> be like: "Am I a shy little disabled div, or an outgoing active div today?"

This lets you swing multiple classes back and forth on the basis of respective expressions linked with the object keys.

NgStyle: Your production assistant for inline styles

NgStyle is your go-to guy when inline styles need to dance to tunes of the component state or user interactions:

<div [ngStyle]="{'color': isBlue ? 'blue' : 'black', 'font-weight': isBold ? 'bold' : 'normal'}"></div>


// <div> be like: "Do I feel 'bold' today, or should I just fade into the 'normal' crowd?"

Remember, binding null or undefined can stealthily slide in unwanted attributes into your element. To prevent such intrusions, explicitly exclude these values:

<div [attr.title]="username || ''"></div>


This ensures that an empty title attribute won't show up uninvited when username is undefined or null.