Angular Core

Angular Core Handling Observable with async Filter


This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Angular Core course:
The "Handling Observable with async Filter" Lesson is part of the full, Angular Core course featured in this preview video. Here's what you'd learn in this lesson:

Lukas introduces Observable, which provides in aynchronity to the app.

Get Unlimited Access Now

Transcript from the "Handling Observable with async Filter" Lesson

>> Lukas Ruebbelke: So now what we can do, because this is an observable stream, you can attach some parameters to this, or you can filter some things. So for instance, we can go pipe.
>> Lukas Ruebbelke: And then from here, let's go filter.
>> Lukas Ruebbelke: This may break on the import, hopefully not.

>> Lukas Ruebbelke: And we could see that if we go back to our JSON here, that we have an approved property here. So some are approved, some are not. And so what we can do, because I can't get this import to work right, I'm just going to show what this would look like.

[00:01:04] You can say, rather, result.,
>> Lukas Ruebbelke: Approved. And it will just say, anything that is approved, it will allow to go through. Okay, so with that said, let's do the short way here. So this.projects =, this.projectsService.all(). So right now it's saying, not an observable, what do we do? Well, let's go here and let's turn this into an observable.

[00:01:52] So we're going to recast this.
>> Lukas Ruebbelke: I totally don't know why I did that. I think the universe is just laughing at me right now. Get up there.
>> Lukas Ruebbelke: There we go. I think we can salvage this.
>> Lukas Ruebbelke: There we go. What we'll also do by convention,
>> Lukas Ruebbelke: When you have an observable stream, typically you put a dollar sign on the end of it to indicate that this is Projects, but it's a stream.

[00:02:38] So we'll go down here.
>> Lukas Ruebbelke: Put a dollar sign on the end of this, there we go.
>> Lukas Ruebbelke: Let's go into our project's component, and where we are iterating over this,
>> Lukas Ruebbelke: Is project of projects.
>> Lukas Ruebbelke: We'll do is,
>> Lukas Ruebbelke: We need to add in an additional pipe which is async.

[00:03:15] So saying that this is an asynchronous service. So what it will do is it's passing in the observable. And that asynch pipe is actually taking that observable, unwrapping it and making that available.