Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Angular 3
  • Overview
  • Transcript

3.2 The Home Component

The first way that we will use our authentication service is by creating a new home page for our application. Right now, if the user comes to the root route of our application, they're redirected to the projects page. Well, let's create a homepage that they'll be redirected to instead. So let's create a home component, so that will be inside the app directory home.component.ts. Of course, we'll import the Component decorator. Let's use the Component decorator and our selector will be 'home' and our templateURL will be 'templates/home.component.html'. Then let's export our class here and this will be called the HomeComponent. Inside this component, let's create a property called loggedIn and this will be a boolean of course and it will be false to start with. But then we're going to need to import the Authentication Service. So let's start at the top. We're going to get the Authentication Service and then we will create our constructor where we can inject it. We will say private auth: of type AuthService. And when the HomeComponent is rendered, we want to check the value of the current user to see if someone is logged in or not. So we're also going to have to import OnInit here at the top. And then let's go ahead and say that the HomeComponent class implements OnInit. And then we'll add the ngOnInit method. And then inside of this method we can say this.auth to get our auth service instance, .currentUser to get the observable. And then we can subscribe to the current value of the user. Now remember, we're using a behavior subject here as our observable. So that means as soon as we subscribe, we will get whatever the last published value was. So if the user was logged in, that will be user. And if the user has not been logged in, that will be false. Now all we really need here is a boolean, we don't actually need the user object themselves. So we can say this.loggedIn will equal and we'll use the double exclamation mark to convert user here to a boolean. So if it's false, that will be false, and if it's a user object, that will be true. And so now, we have set our loggedIn value. But remember, one of the benefits of using an observable is that since we're subscribing to a stream of data here, if the value of current user changes, for example, if the user logs in or logs out, then our function here will be called again and we will reset the value of loggedIn. And when we change that property, our home component template will be rerendered. So, just by using observables and subscribing in this way, we can always keep our view up to date. All right, so let's go ahead and create our template home.component.html. At the top here, we'll have an h2, that will just say, Welcome!. And then we will have two paragraphs. The first one, we'll use a *ngIf directive, and we can say If loggedIn. And this of course will display if loggedIn is true. Then inside of this, we'll have an anchor element. Let's give it a [routerLink] going to /projects, and inside the anchor, we will say View your projects. Then I'm just going to copy this and paste it down below here, but instead of saying If loggedIn, we will say If not loggedIn. Well, then the routerLink will instead go to the /login page. And the text can say Go to login form. And of course we haven't created our login page yet but we will get there. So, right now login should be false since we don't have a way of logging in the user yet. And so we should see Go to login form. Now we have to open up our app.module file, and let's go ahead and import the HomeComponent. And then of course we will add it down here in our declarations, HomeComponent. But then we also need to add our route. So up here in our routes array, let's go ahead and I'll just copy the project's array. And we'll change the path to home and we will change the component to the HomeComponent. And then of course when we go to the root route, let's also redirect to home. Okay, with those things in place we should be able to see our HomeComponent in action. So if we come back to the browser and go to the home page. It looks like we have an error, we can't find the node module rxjs. Okay, and I guess, I think just when we are importing behavior subject we need to 'rxjs/Rx'. I think that's the problem there. And if we fix that and come back, you can see our homepage is being successfully displayed. We have Welcome! Go to the login form. Now we could actually see this work if we go to localStorage.setItem. And we can set the user, and I will just set this to a empty object. But remember, it has to be a string because that's what localStorage expects. You'll of course notice that the value doesn't change automatically when I add to localStorage. Because we didn't change the observable, we just added something to localStorage. But when we refresh the page and our Authentication Service is instantiated, it will read that object from localStorage and, therefore, we get a true value and we get the link View your projects, which takes us to our projects page. All right, so that is the HomeComponent.

Back to the top