Reactive Angular Course

Author: Your Name

src/app/app.component.html

@@ -22,12 +22,12 @@
         <span>Register</span>
       </a>
 
-      <a mat-list-item routerLink="login">
+      <a mat-list-item routerLink="login" *ngIf="auth.isLoggedOut$ | async">
         <mat-icon>account_circle</mat-icon>
         <span>Login</span>
       </a>
 
-      <a mat-list-item (click)="logout()">
+      <a mat-list-item (click)="logout()" *ngIf="auth.isLoggedIn$ | async">
         <mat-icon>exit_to_app</mat-icon>
         <span>Logout</span>
       </a>

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {LoadingService} from './loading/loading.service';
 import {MessagesService} from './messages/messages.service';
+import {AuthStore} from './services/auth.store';
 
 
 
@@ -11,7 +12,7 @@ import {MessagesService} from './messages/messages.service';
 })
 export class AppComponent implements  OnInit {
 
-    constructor() {
+    constructor(public auth: AuthStore) {
 
     }
 
@@ -21,6 +22,7 @@ export class AppComponent implements  OnInit {
     }
 
   logout() {
+        this.auth.logout();
 
   }
 

src/app/login/login.component.ts

@@ -3,6 +3,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 
 import {Router} from '@angular/router';
+import {AuthStore} from '../services/auth.store';
 
 @Component({
   selector: 'login',
@@ -15,7 +16,8 @@ export class LoginComponent implements OnInit {
 
   constructor(
     private fb: FormBuilder,
-    private router: Router) {
+    private router: Router,
+    private auth: AuthStore) {
 
     this.form = fb.group({
       email: ['test@angular-university.io', [Validators.required]],
@@ -32,6 +34,16 @@ export class LoginComponent implements OnInit {
 
     const val = this.form.value;
 
+    this.auth.login(val.email, val.password)
+        .subscribe(
+            () => {
+                this.router.navigateByUrl("/courses")
+            },
+            err => {
+                alert("Login failed!");
+            }
+        );
+
 
 
   }