In this lecture, we are going to learn how to subscribe to an observable from a template angular makes
this process painless.
Let's get started.
The goal is to render links based on the user's current authentication status.
The links for the navigation can be found in the navigation component.
Open the navigation component class file.
We created a service for exposing this information.
Let's inject it into our class at the top of the file import, the authentication service.
Next, we will inject this service into the constructor function.
The name of the property will be called authentication.
We should subscribe to the is authenticated observable from this service.
It'll inform our component of the user's authentication status inside the constructor function.
We will subscribe to the is authenticated observable from the authentication service.
For the observer, we will pass in a function that accepts the value pushed from the observable.
We will refer to the value as status.
Lastly, we should locally store this value in our class at the top of the class, create a property
called is authenticated with a default value of false.
Inside the subscriber, we will set the is authenticated property to the status argument.
Our component class is ready, we can move on to updating the template, open the navigation component
template file.
In the template, you can find the links for the navigation menu under a comment that says navigation
links, there are a total of four links.
The first three links should be toggled.
The log and links should be rendered when the user is not logged in.
As for the manage and upload links, they should be rendered when the user is authenticated into our
app.
We can toggle the visibility of the links by using structural directives on the first link.
We will apply the NGF Directive.
The condition for this directive will be the is authenticated property.
We want to check if this property is false.
We've discussed how to apply conditional rendering, but we never went beyond the NGF directive, in
some situations, we may want to render a different set of tactics if the condition in the energy if
directive fails angular supports else conditions in templates.
It's similar to how else blocks work in JavaScript after the condition.
We can add a semicolon, followed by the else keyword.
After the last keyword, we need to specify a template before we specify the template, we should create
a template.
We're going to wrap the list item elements surrounding the links with the N.G. template element.
Next, we need to add a template reference variable to the energy template element.
We will call the template reference authenticated links.
By creating a template reference variable, we can pass it into the health condition.
The NGF directive will render the template if the condition fails, the health template is entirely
optional by including this keyword.
We can choose to render a different template if a condition fails.
We're finished updating the template.
Let's test the app in our browser.
The links in the menu should appear based on the user's authentication status.
You should be able to view the correct links.
I'm still logged in to my account.
Therefore, I'll be able to view the manage and upload links.
You may see a different set of links.
Our solution works, but there's a better approach to implement this solution.
Back in our editor, we are subscribing to the is authenticated, observable straight from the constructor
function.
Next, we had to store the value pushed by the observable.
It's not ideal to write these lines of codes and every component angular defines a pipe for subscribing
to an observable from within the template.
Let's switch back to the template file in the NGF directive.
We're going to apply the async pipe.
Instead of checking the is authenticated property, we will check the is authenticated observable.
Straight away, we will receive an error.
The error is not so clear if we are to view it in our ED.
The problem with our code has to do with the value accepted by the async pipe.
This pipe can be passed any promise or observable.
However, we are providing an observable.
The error stems from the negation operator before angular passes on the observable to the pipe.
Existing operators will be applied to the value if we want to apply the negation operator after a value
has been pushed.
We need to wrap the is authenticated, observable with parentheses.
By doing so, Angular will pass on the observable to the async pipe behind the scenes.
The async pipe will subscribe to the observable values pushed by the observable will be given to the
directive or expression after receiving the emitted value.
The logical not operator will check if the value is false.
The async pipe is super helpful.
We can use it to subscribe to observables from our templates.
We're not limited to observables.
We can use this operator with promises.
If we pass in a promise, the value resolved by the promise will be returned.
We can safely remove the subscription from our class back in the class file.
We will remove the Subscribe button and is authenticated property.
Let's check out the app in the browser.
We get the same behavior as before.
Great, refreshing the page will yield the same results were able to render our components based on
the user's authentication status.
Firebase will handle persisting the authentication across page refreshes.
The angular fire package will expose this information via an observable.
Whenever possible, we should use the async operator to handle subscriptions.
In the templates.
I provide a link to the documentation for the async pipe.
Check it out if you'd like to learn more in the following lecture, we are going to continue authenticating
the user in our app.