{"id":2170,"date":"2024-09-18T14:12:01","date_gmt":"2024-09-18T21:12:01","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2170"},"modified":"2024-09-18T14:12:01","modified_gmt":"2024-09-18T21:12:01","slug":"syntax-tricks-for-angular-html-attribute-bindings","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/syntax-tricks-for-angular-html-attribute-bindings\/","title":{"rendered":"Syntax tricks for Angular HTML attribute bindings"},"content":{"rendered":"\n

What’s great about Angular is that the framework provides many different features out of the box. Some are well documented and widely known, while others are more obscure and less commonly used, though very useful.<\/p>\n\n\n\n

For instance, there’s a ngClass<\/code> directive<\/a> to dynamically set classes to an element based on conditions:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

In the above example, the button will have an active-btn<\/code> CSS class if isActive<\/code> is true, and a disabled-btn<\/code> CSS class if isDisabled<\/code> is true. That’s what the directive does.<\/p>\n\n\n\n

But the thing is… We don’t need a directive to do that. I never use ngClass<\/code>.<\/p>\n\n\n\n

Instead, I do this:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

It works the same way, and I’d argue that the syntax is slightly easier to understand. No directive needed.<\/p>\n\n\n\n

On a different note, if you’ve ever tried to set the values of non-HTML attributes to an element, such as data-test<\/code> for unit or end-to-end testing, you would find out that this syntax doesn’t work: [data-test]=\"value\"<\/code><\/p>\n\n\n\n

For these “unknown” HTML attributes, we need to use the following syntax: [attr.data-test]=\"value\"<\/code><\/p>\n\n\n\n

And then all is fine.<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

What’s great about Angular is that the framework provides many different features out of the box. Some are well documented and widely known, while others are more obscure and less commonly used, though very useful. For instance, there’s a ngClass directive to dynamically set classes to an element based on conditions: In the above example, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,8,7],"tags":[],"class_list":["post-2170","post","type-post","status-publish","format-standard","hentry","category-angular","category-components","category-template-syntax"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=2170"}],"version-history":[{"count":5,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2170\/revisions"}],"predecessor-version":[{"id":2180,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2170\/revisions\/2180"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}