vendredi 30 décembre 2016

Angular 2, Update a component from another

Angular2 it's a new technology for me and I have some problems ... I have 2 components:

  1. user login form
  2. connect/disconnect button

My App screen shoot

I would like when I connect with the form, that my component 1 says to my component 2: "Get up to date!". Knowing that to update itself it must request a web service that it already makes when the component 2 initializes.

How do I call my LoginButtonComponent in my LoginComponent?

LoginComponent

import { Component, OnInit }        from '@angular/core';
import { FormBuilder, Validators }  from '@angular/forms';
import { LoginService }             from './login.service';
import {Router}                     from '@angular/router';


@Component({
  selector: 'app-login',
  providers: [LoginService],
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  errorMessage: string;
  strings: String[];
  mode = 'Observable';

  public loginForm = this.fb.group({
    mail: ["", Validators.required],
    password: ["", Validators.required]
  });  

  constructor(public fb: FormBuilder, private loginService: LoginService, private router : Router) { }

  ngOnInit() {
    
  }

  login(event){
    this.loginService.login(this.loginForm.value)
      .subscribe(
        success => {
          this.router.navigate(['/']);
        },
        error => function(){}
      );
  }

 

}

LoginButtonComponent

import { Component, OnInit } from '@angular/core';
import { LoginService }      from '../login.service';
import {Router} from '@angular/router';


@Component({
  selector: 'app-login-button',
  templateUrl: './login-button.component.html',
  styleUrls: ['./login-button.component.css']
})
export class LoginButtonComponent implements OnInit {

  errorMessage: string;
  mode = 'Observable';
  public isConnected : boolean;
  public message = "Connectez vous !";

  constructor(private loginService: LoginService, private router : Router) { 
    this.isConnected = false;
  }

  

  ngOnInit() {
    this.connect();  
  }


  setLogin(){
    this.isConnected = true;   
    this.message = "Se déconnecter";
  }

  setLogout(){
    this.isConnected = false;
    this.message = "Connectez vous !";
  }

  connect(){
    /**
     * Send query to web service
     *  web service returns 200 on success and 401 on failure
     *  */
    this.loginService.connected()
    .subscribe(
        str  => {
          this.setLogin();
        },
        error =>  function(){
          this.setLogout();
        });

  }

  

  logout(){
    this.loginService.logout()
      .subscribe(
          str  => this.setLogout,
          error =>  function(){
            this.errorMessage = <any>error;
            this.setLogout();
          });
        this.connect();
  }

  click(){
    this.ngOnInit;
    if(this.isConnected){
      this.logout();          
    }else{
      this.router.navigate(['/login']);
    }
  }

}
<li>
  <a (click)="click()"><i class="fa fa-user-circle"></i> </a>          
</li>

Thank you for your help.




Aucun commentaire:

Enregistrer un commentaire