{"id":1233,"date":"2023-07-25T05:00:00","date_gmt":"2023-07-25T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1233"},"modified":"2023-07-21T16:11:29","modified_gmt":"2023-07-21T23:11:29","slug":"ng-class-for-dynamic-styling","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/ng-class-for-dynamic-styling\/","title":{"rendered":"ng-class for dynamic styling"},"content":{"rendered":"\n
\n

This is a guest post by Tomas Kotlar. Thanks for your contribution, Tomas! Remember than anyone can reach out to me to contribute or suggest post ideas.<\/em><\/p>\n<\/blockquote>\n\n\n\n

ngClass<\/a><\/strong>, as defined by the Angular documentation, is a built-in attribute directive that dynamically modifies the behavior of other HTML elements. <\/p>\n\n\n\n

Common use cases<\/h2>\n\n\n\n

Conditional Styling<\/strong><\/h3>\n\n\n\n

Let’s consider a button element that changes color based on whether it’s disabled or active. We can use ngClass<\/code><\/strong> to toggle between the ‘active-btn’ and ‘disabled-btn’ classes, giving the button a responsive touch:<\/p>\n\n\n\n

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

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

Whenever the button is clicked, the toggleDisabled()<\/code> function will be executed, toggling the value of isDisabled<\/code>.<\/p>\n\n\n\n

As a result, the button will become enabled or disabled based on the updated value of isDisabled<\/code>, and the corresponding style (active or disabled) will be applied.<\/p>\n\n\n\n

Using an Object<\/strong><\/h3>\n\n\n\n

ngClass<\/code> goes beyond just toggling classes. It also lets you iterate over object properties to apply your styles conditionally. This can be handy when working with data-driven apps or displaying dynamic content.<\/p>\n\n\n\n

For example, using the following data:<\/p>\n\n\n\n

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

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

In our HTML, we can apply dynamic styles using an array:<\/p>\n\n\n\n

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

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

Based on the type (‘hero’ or ‘villain’), the directive applies the appropriate highlight class to the hero card.<\/p>\n\n\n\n

Combining classes using conditions<\/strong><\/h3>\n\n\n\n

With ngClass<\/code><\/strong>, you can mix multiple CSS classes, toggling them individually or creating compound styles:<\/p>\n\n\n\n

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

The hero cards will be highlighted for heroes who can fly and have a different style for heroes who cannot, based on the canFly<\/code><\/strong> property.<\/p>\n\n\n\n

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

This is a guest post by Tomas Kotlar. Thanks for your contribution, Tomas! Remember than anyone can reach out to me to contribute or suggest post ideas. ngClass, as defined by the Angular documentation, is a built-in attribute directive that dynamically modifies the behavior of other HTML elements. Common use cases Conditional Styling Let’s consider […]<\/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,11,7],"tags":[],"class_list":["post-1233","post","type-post","status-publish","format-standard","hentry","category-angular","category-components","category-directives","category-template-syntax"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1233","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=1233"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1233\/revisions"}],"predecessor-version":[{"id":1241,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1233\/revisions\/1241"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}