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

3.4 The Updated App Component

The very first component that we made for our application was the app component. And the app component is mainly this pink toolbar at the top of our page. Of course, there's not much to it right now, but at this point we've created a couple of different routes and we have some login capabilities. So I think it's time that we add some features to our app component. Let's start here in the app component template. And at the top we have a toolbar. Let's add a couple more spans here. So these spans will also have the class md-tool, and then inside let's have a couple of links. The first link will go to the home page and we'll just give it the text Home, and then we'll duplicate this whole span. And we will have another link here which goes to the projects page, and I will just use the text Projects. If we come back to the browser, we can see that clicking the Projects page takes us there. Clicking the Home page takes us back, all right, that's good. But we also want to have a couple of other elements here. We wanna have a image of the currently logged in user. We wanna have their user name and we wanna have a Log Out button. Now right now if we look back at our app component, it doesn't have any knowledge of the currently logged in user. So we're going to have to add a few things here. Let's start by importing the AuthService and let's also go ahead and import the router from @angular/router, because when we choose to log out we will have to do some redirecting. Okay, so inside AppComponent, let's create a constructor whereby we can inject both the AuthService and the router. So private auth is going to be an AuthService and private router is going to be a Router. Now since we want both our username and user Avatar, let's create a user property on our AppComponent and then inside ngOnInit we will give that user property a value. But first, let's implement ngOnInit, there we go. And so now in ngOnInit, we can say this.auth.currentUser and remember we're getting the observable that keeps track of the current user, we can subscribe to that user object and we will say this.user = user. All right, and so now from within the AppComponent, we have access to that user. So let's tidy this up just a bit. Let's add an image here. And this image will only be displayed, ngIf there is a user value. And if there is a user value, then we'll bind to the source attribute, and we will bind the value user.avatar. After this we'll add another span. It will have the class md-tool. And just like with the image, we will say *ngIf there is a user, then we'll display this span. And inside this, we will have user.username and then we'll just include a vertical line and then let's add an anchor element. This anchor element won't actually go anywhere. Let's just give it a hash symbol as it's href, but the reason we want an anchor element is so that we can bind it to its click event. And remember when we are binding to an event that's coming out of an element, we use these parentheses around the event name. And of course, the text here is going to be Log_Out, and this is going to call a logout method when it gets clicked. All right, so we just need to add that logout method to our app component. So we will have a method here named logout and when this method is called, we'll do this.auth.logout to actually log out the user. And then we'll do this.routor.navigateByUrl and we will navigate to the root route and then we will just return false. So that we don't actually try and perform a redirection because of the anchor element that we clicked. Okay, let's see this in action. So if we come back to our Home page here, you can actually see that all of our elements are being displayed properly. And we are logged in as Jimmy. And if I go ahead and click log out, notice two things here, three things actually. First of all, we are redirected back to the Home page. Second of all, the Home page no longer says go to the project's route. Instead it says go to login form. And third, the user was taken out of our toolbar here at the top. Of course, the redirection happened because we called that redirect inside of the logout function in the app component. But the content in the Home page and the change in the toolbar were both caused by the observable being updated. The observable was updated, both of these views were subscribed to that change, and they acted in accord with those changes. So now we have a really nice toolbar here at the top which interacts with our login perfectly. So we can actually try this again. If I log in as a different user here, you can see that when we log in right away, April and her picture appear in the toolbar. And so there you go, we have a much improved AppComponent.

Back to the top