{"id":1565,"date":"2023-10-03T05:00:00","date_gmt":"2023-10-03T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1565"},"modified":"2023-09-26T14:55:01","modified_gmt":"2023-09-26T21:55:01","slug":"increasing-binding-specificity","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/increasing-binding-specificity\/","title":{"rendered":"Increasing binding specificity"},"content":{"rendered":"\n

Let’s say we want to trigger an action when the user hits enter on their keyboard. We could do something like this, capturing the keydown<\/code> event and then decide what to do based on the entered key:<\/p>\n\n\n

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

<\/p>\n\n\n

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

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

While the above works, it’s pretty verbose. Instead, we can make our binding more specific by doing the following:<\/p>\n\n\n\n

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

<\/p>\n\n\n

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

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

Now, that’s a lot more specific and less verbose. The same goes for class bindings. Here’s a lengthy example:<\/p>\n\n\n

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

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

Since all we want to do is toggle the green class on or off based on a boolean expression, the following syntax is shorter and better:<\/p>\n\n\n

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

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

You can see these examples in action on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Let’s say we want to trigger an action when the user hits enter on their keyboard. We could do something like this, capturing the keydown event and then decide what to do based on the entered key: While the above works, it’s pretty verbose. Instead, we can make our binding more specific by doing the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,31,8,7],"tags":[],"class_list":["post-1565","post","type-post","status-publish","format-standard","hentry","category-angular","category-best-practices","category-components","category-template-syntax"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1565","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=1565"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1565\/revisions"}],"predecessor-version":[{"id":1574,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1565\/revisions\/1574"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}