Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

    Juri StrumpflohnerJuri Strumpflohner

    The network may be unreliable and loading data may take time. Thus it is important to give the user some feedback about what's going on as fast as possible. In this lesson we learn how to leverage the else block of the *ngIf directive to show a simple loading indicator.

    angularAngular
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 Here we see a component, a person detail, which has a button. Whenever the user clicks the button here an HTTP request is being issued to some JSON file.

    00:10 The result is stored here in an observable which is then bound directly in the template of the component by using an async pipe here, and by storing the result in that person's template variable.

    00:23 Let's for a second inspect here the network panel. What we would like to do is to throttle the network connection to its low 3G connection. Now, when we clicked that button we can see that the request is being made, but it takes a couple of seconds here until something's been displayed.

    00:43 While that loading is going on, nothing's being displayed to the user, actually. We would like to change that. Let's see how.

    00:52 Basically, as long as that observable isn't resolved, so the data hasn't come back from the back end, we would like to show some other template. Once it gets resolved, it should actually show this template inside here with the correct data.

    01:06 First, we can use the NG template. Inside here we simply show something like loading person dot, dot, dot. Now, this template can be attached to this NG if part here by using the new introduced as clause, so we can use as.

    01:27 Now we see we have to give that template a name. Let's call it person.loading. We can now then reference that person loading up there. Basically, as long as this request goes on, this part will be shown because this here resolves to null. Otherwise, this part is here showing which correctly in this place, the correct data.

    01:49 Let's store this. Now let's again open up here our window. Let's throttle it here to our 3G connection. Now if we click, we see that loading person. Once it resolves, it shows the correct data.

    Discuss

    Discuss