What is Attribute binding in Angular? 🤔 Angular Interview Q&A

Attribute binding is a powerful feature in Angular which allows you to easily manipulate attributes of HTML elements based on certain conditions or values. This is particularly useful when you want to dynamically change attributes such as src, href, disabled, class, style, and many others based on the data or state of your Angular application.

With attribute binding, you can bind HTML attributes to Angular component properties, making it easy to update the attributes based on changes in the component’s state.

Here’s a simple example of attribute binding in Angular:

“`html

“`

In this example, we are using attribute binding to bind the src attribute of the <img> element to the imageUrl property of the Angular component. This means that whenever the imageUrl property changes, the src attribute of the <img> element will also be updated accordingly.

Attribute binding can also be used with other attributes such as class, style, and disabled. For example:

“`html
Click me

This is some text

“`

In these examples, we are using attribute binding to dynamically set the class and style attributes of the <button> and <p> elements based on the value of the isDisabled and isRed properties respectively.

Overall, attribute binding in Angular is a powerful feature that makes it easy to dynamically manipulate HTML attributes based on the state of your Angular application, making your code more flexible and maintainable.

That’s it for this Angular interview Q&A on attribute binding. I hope you found this article helpful!