How to use the ASYNC PIPE effectively in Angular Templates

this is the async pipe and it allows you to use an observable or promise directly in your template without needing to subscribe to it or await a result so in this case i have an observable called clients and i'm pulling that in from the client service through the get clients method and that provides me with an observable stream of clients that emits an array of clients which i am then displaying inside of this list so with the async pipe i don't need to worry about subscribing or unsubscribing from that observable the async pipe just handles it all for me and i can just display the data so this works great with an ng4 where we want to loop over some data in a stream but that's not the only way that we can use the async pipe we might have a stream or a promise that just has a single value like a single client for example so perhaps we want to use the name of that client in our template as the title so we can't just do this because client is an observable so we can't just access the name properly directly on it but we can wrap the client in parentheses and then we can add the async pipe and if we add the safe navigation operator on here that's going to check that a value exists as well and now this is going to allow us to access the value so the async pipe is going to pull that data out of the observable stream for us and then we can access its properties so if i save that now you can see that we actually get the name in the title and we were able to do that without needing to actually subscribe to the client observable in our class but what if we want to access multiple values say we want to access the first name and the last name for the title well in that case we might just use the async pipe twice so you can see over on the right here that works i have the first name and the last name now but we can see that it's getting a bit awkward not only is this going to look messy as we access more and more properties but it also means that the template is subscribing to the client stream multiple times so this isn't ideal and it isn't necessary either so what we can do instead is this an ng container allows us to use structural directives like ng if and ng4 without actually needing to add an additional element like a div to the dom to hold it so with this approach it allows us to only display the client data if it is available and as well as that we can access the data as much as we need within this container as client and you can see here i'm just referring to the properties directly as client.name.first and client.name.last okay so that's pretty cool but let's look at one more example further down this page here so in this example we are doing basically the same thing we are using an ng if on the parent element and anywhere within that we can access client as client directly and you can see we're doing this multiple times throughout this parent container but what is different about this example is that we also have this else loading on the end as well so consider that we might want to display something to the user whilst this data is loading in so we're dealing with an observable stream that emits data over time here and we don't know when that data is going to be emitted from the stream but how will we know if data from the observable stream has emitted if we aren't actually subscribing to the observable stream ourselves so we could go to the class for this template and we could subscribe to client directly and we could then use those data emissions to control displaying and hiding something like a loading overlay that kind of defeats the purpose of using the async pipe in the first place we want the async pipe to manage the subscription for us and if we end up having to subscribe to it anyway then it kind of just you know defeats the whole purpose so if we do want to display some kind of loading indicator without having to subscribe to it ourselves then our logic is going to have to be controlled in the template where the async pipe can work and fortunately for us this is a pretty neat solution so what we can do is we can use an ng template to define the template we want to display to the user when the data is loading so by default an ng template won't be rendered in the dom when your application is being rendered if angular comes across an ng template it's basically just going to be like all right it's going to ignore that completely however what we can do is attach this loading template variable to it and we can control when that is displayed without else loading statement here so if our client data isn't available it's going to trigger this statement which is going to make this ng template visible in the dom and since we're using an ng if here for this parent element if the client data isn't available it's not going to display this and it is going to display this and vice versa for when the data does load in it's going to stop displaying this and it's going to start displaying this so you can see what this looks like if i just refresh this page it's going to take a second or two to pull in this specific client from firebase so if i refresh this you can see that we have that finding client template displaying and then once the data is available it all just pops in so do that one more time so you can have a look at it again and you can see that all works pretty nicely so the async pipe is one of my favorite things in angular wherever possible i would recommend using it because you don't have to worry about subscribing and more importantly you don't have to worry about unsubscribing and creating memory leaks and things like that and there is quite a bit that you can do with it outside of the more typical approach which is just using it to display a list of data like this okay i hope you enjoyed this video if you did please do feel free to leave a like and subscribe and i will see you in the next one [Music] you

Channel: Joshua Morony

Views: 2,043

Rating: 5 out of 5

Keywords: ionic, tutorial, tutorials, ionic tutorials, ionic framework, coding, coding tutorials, angular, angular tutorials, cordova, cordova tutorials, capacitor tutorials, mobile, mobile apps, apps, html5, ios, android, native, hybrid, pwa, web apps, progressive web applications, programming, ionic 5, react, stenciljs, stencil, performance, ui, ux, animations, screencast

Id: ev1yE0SYs9Y

Length: 6min 57sec (417 seconds)

Published: Wed Oct 13 2021