{"id":1780,"date":"2023-11-16T05:00:00","date_gmt":"2023-11-16T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1780"},"modified":"2023-11-15T16:41:06","modified_gmt":"2023-11-16T00:41:06","slug":"angular-17-simplifying-styles","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-17-simplifying-styles\/","title":{"rendered":"Angular 17: Simplifying style(s)"},"content":{"rendered":"\n

A major focus of the Angular team over the past two years has been to improve the developer experience by removing some of the common annoyances in the framework (better error messages, for instance). This is often referred to as “quality of life” improvements, and the Angular 17 feature I want to cover today is undoubtedly one of those.<\/p>\n\n\n\n

Have you ever wondered why the component decorator always had a styleUrls<\/code> or styles<\/code> attribute even when 99.9999% of the time, we need one style URL or CSS style?<\/p>\n\n\n

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

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

Well, I have good news for you! Angular 17 introduced a styleUrl<\/code> attribute (singular) for a single style file:<\/p>\n\n\n

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

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

And the other styles<\/code> attribute has more flexibility as well as it now supports a single string<\/code> or an array of strings<\/a>, which means all options are available now:<\/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

A simple change that makes our life easier!<\/p>\n","protected":false},"excerpt":{"rendered":"

A major focus of the Angular team over the past two years has been to improve the developer experience by removing some of the common annoyances in the framework (better error messages, for instance). This is often referred to as “quality of life” improvements, and the Angular 17 feature I want to cover today is […]<\/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],"tags":[],"class_list":["post-1780","post","type-post","status-publish","format-standard","hentry","category-angular","category-components"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t