{"id":337,"date":"2023-01-18T05:00:00","date_gmt":"2023-01-18T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=337"},"modified":"2023-01-18T17:09:04","modified_gmt":"2023-01-19T01:09:04","slug":"ngrxlet-a-better-version-of-the-async-pipe","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/ngrxlet-a-better-version-of-the-async-pipe\/","title":{"rendered":"ngrxLet: A better version of the async pipe"},"content":{"rendered":"\n

Yesterday, we mentioned how the async<\/code> pipe can be used with *ngIf<\/code> or *ngFor<\/code><\/a> in our templates to declare a local variable that allows us to have multiple expressions using the same data:<\/p>\n\n\n

<div<\/span> *ngIf<\/span>=\"user$ | async as user\"<\/span>><\/span>\n   <p<\/span>><\/span>First name: {{ user.firstName }}<\/p<\/span>><\/span>\n   <p<\/span>><\/span>Last name: {{ user.lastName }}<\/p<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
While the above code works perfectly well, it’s not always convenient to add an additional *ngIf<\/code> or *ngFor<\/code> in our templates. Another shortcoming of the async pipe is that it doesn’t let us know if the observable<\/code> has an error or completes successfully.<\/p>\n\n\n\n
<div<\/span> *ngrxLet<\/span>=\"user$ as user\"<\/span>><\/span>\n   <p<\/span>><\/span>First name: {{ user.firstName }}<\/p<\/span>><\/span>\n   <p<\/span>><\/span>Last name: {{ user.lastName }}<\/p<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
And if we want to get any errors or the completion status of the observable, we can do so with more local variables exposed by ngrxLet<\/code>:<\/p>\n\n\n
<div<\/span> *ngrxLet<\/span>=\"user$ as user; error as e; complete as c\"<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Here is a link to a slightly expanded version of that tutorial with more information if you want to dig deeper into it: ngrxLet – A better version of the async pipe<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Yesterday, we mentioned how the async pipe can be used with *ngIf or *ngFor in our templates to declare a local variable that allows us to have multiple expressions using the same data: While the above code works perfectly well, it’s not always convenient to add an additional *ngIf or *ngFor in our templates. Another […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,10,7],"tags":[],"class_list":["post-337","post","type-post","status-publish","format-standard","hentry","category-ngrx","category-rxjs","category-template-syntax"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/337","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=337"}],"version-history":[{"count":7,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/337\/revisions"}],"predecessor-version":[{"id":357,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/337\/revisions\/357"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You can find a complete working example here<\/a>. ngrxLet<\/code> can be installed as a dependency using npm (npm install @ngrx\/component<\/code>), and it’s important to note that it is not the entire ngrx<\/code> state management library, just a tiny subset of it, so using that directive does not require using anything else from ngrx<\/code>.<\/p>\n\n\n\n
This is where the ngrxLet directive<\/a> can save the day, as it solves all of the above shortcomings with a straightforward syntax. Our previous example becomes:<\/p>\n\n\n