Angular4 : How informing MenuComponent that a user is logged

Question

My menu is driven by MenuComponent and Login is driven by LoginComponent In my nav bar I have this:

<li *ngIf="!isConnected"><a [routerLink]="['/login']" class="btn btn-link">Login</a></li>
<li *ngIf="isConnected"><a href="" (click)="logout()">Logout</a></li>

How can I pass isConnected which is a variable of MenuComponent, to True when I am in the method login() which is in LoginComponent.ts?

Use a shared service to pass the Boolean from a component to an other. — Ploppy, Aug 05 '17 at 10:51
Why not but it seems to be complicated, have you a SIMPLE example of a shared service ? — Nicolas Alain, Aug 05 '17 at 12:04
There is a good example in the official docs, using `Subject`: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service This is totally applicable for any kind of component interaction, if components that are subscribing are not in view at the same time, you'd just need to use e.g a `BehaviorSubject` — AT82, Aug 05 '17 at 14:06

score 0 · Answer 1 · answered Aug 05 '17 at 11:23

0

try using @Input and EventEmitters with @Output in the angular docs. component interaction angular.io

answered Aug 05 '17 at 11:23

saunet

1

Hello, is it possible when MenuComponent is called by a route and then inserted in a ? – Nicolas Alain Aug 05 '17 at 12:02
check this [link( https://stackoverflow.com/questions/35884451/angular-2-sibling-component-communication)] – saunet Aug 05 '17 at 12:12

Nicolas Alain · Answer 2 · 2017-08-05T14:55:27.590

I think I have a solution (thanks to Ploppy), it's not perhaps THE solution but it's simple and efficient, here is my code :

The service :

import { Injectable } from '@angular/core';
@Injectable()
export class SharedService {
  public isConnected: boolean;
  constructor() { }
}

MenuComponent

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

  @Input() isConnected: boolean;
  constructor(private router: Router, private sharedService: SharedService){ 
   this.sharedService.isConnected = false;
 }

  ngOnInit() {
  }
  logout() {
    this.sharedService.isConnected = false;
    this.router.navigate(['/home']);
  }
}

LoginComponent

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  user: User;
  isConnected: boolean = false;
  constructor(private router: Router, private sharedService: SharedService) { }
  ngOnInit() {
    this.user = new User();
  }
  public login(){
   if (...) {
    this.partageService.isConnected=true;
    this.router.navigate(['/home']);
    }
  }
}

AppComponent.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router, public sharedService: SharedService){}
}

AppComponent.HTML

<app-menu [isConnected]="sharedService.isConnected"></app-menu>

A little inconvenience : it is MenuComponent wich have logout() instead of LoginComponent, it's not very correct, logout() is not the responsability of MenuComponent but LoginComponent ! An idea to solve this issue ?

Angular4 : How informing MenuComponent that a user is logged

2 Answers2