We will compare the two syntaxes, and explain why the new @if syntax is better and how to automatically migrate to it.<\/li>\n<\/ul>\nType 1-100<\/h2>\n
If you are using older versions of Angular, you can migrate to the new @if syntax using the Angular CLI. Notice that we don’t have to import the @if directive from @angular\/common into our component templates anymore. We’ll also talk about a common anti-pattern that developers often encounter, which has to do with the use of @if in conjunction with the async pipe. We are repeating the use of @if and the async pipe, at multiple levels of the page, just for the purpose of accessing data, and nothing more. As you can see, we are using async pipe to unwrap the values of different Observables and assign them to a local template variable. It\u2019s no longer necessary to wrap a @for loop with an @if to check if the array is empty.<\/p>\n
Table of Contents<\/h2>\n
It\u2019s simply closer to the syntax used in languages such as Typescript and JavaScript, making it easier to read and understand. Add type safety to your form code by relying mostly on type inference, without needing to add extra type annotations. If you apply this at the beginning of the template, you will have all your data easily available everywhere. A good way to avoid this is to refactor your component so that it provides one single data$ observable, containing all the data that the page needs.<\/p>\n
Syntax<\/h2>\n
As you can see, this removes all the unnecessary @if nesting and makes the code much more readable and maintainable. The new @if is built-in directly into the template engine, so it’s automatically available everywhere. The @if block conditionally displays its content when its condition expression is truthy. With the new @empty syntax, you can directly check if the array is empty and show a proper message. The new @for uses a new diffing algorithm that improves by 90% the runtime performances (read the v17 announcement for more details).<\/p>\n
This practice makes the code hard to read and maintain if several nesting levels are needed. This anti-pattern is sometimes known as “async pipe chaining” or “pyramid of doom”. If you use RxJs in your code, I think this is well worth mentioning it because you will see it a lot, and it’s directly related to @if. In both cases, the hidden element still exists in the DOM, while with @if the hidden element doesn’t exist on the DOM at all.<\/p>\n","protected":false},"excerpt":{"rendered":"A complete guide to all the features of the @if template syntax, including the most frequently asked questions bout this syntax, as well as an anti-pattern to avoid. A complete guide to all the features and best practices of the new @for template syntax, as well as a full explanation of the now mandatory tracking[…]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"categories":[146],"tags":[],"class_list":["post-3821","post","type-post","status-publish","format-standard","hentry","category-forex-trading"],"_links":{"self":[{"href":"https:\/\/santiceramics.com\/index.php?rest_route=\/wp\/v2\/posts\/3821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santiceramics.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santiceramics.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santiceramics.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santiceramics.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3821"}],"version-history":[{"count":1,"href":"https:\/\/santiceramics.com\/index.php?rest_route=\/wp\/v2\/posts\/3821\/revisions"}],"predecessor-version":[{"id":3822,"href":"https:\/\/santiceramics.com\/index.php?rest_route=\/wp\/v2\/posts\/3821\/revisions\/3822"}],"wp:attachment":[{"href":"https:\/\/santiceramics.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santiceramics.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santiceramics.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}