6.3: Using Alertify in Components

Next, we need to go through our components and replace console logged messages with our alertify errors.

In all of these components, first inject the alertify service into the constructor.

Example:

constructor(private _alertify: AlertifyService) { }

NavComponent

login() {
    this.authService.login(this.model).subscribe(data => {
      this._alertify.success('Logged in successfully');             //  <--- changed
    }, error => {
      this._alertify.error('Failed to login.');                     //  <--- changed
    }, () => {
      this.router.navigate(['members']);
    });
  }

  logout() {
    this.authService.userToken = null;
    localStorage.removeItem('token');
    this._alertify.success('Logged out');                           //  <--- changed
    this.router.navigate(['/home']);
  }

RegisterComponent

register() {
    this._authService.register(this.model).subscribe(() => {
      this._alertifyService.success('Registration successful');     //  <--- changed
    }, error => {
      this._alertifyService.error(error);                           //  <--- changed
    });
  }

Testing Alertify Messages

Open the browser and verify that the alertify messages are displaying correctly.

LoggedInMessage

LoggedOutMessage

LoggedOutError

RegisterError