Change Boolean from another component in angular 4

Question

I'm using Booleans and a userRights.service for checking whether a nav-point is shown or hidden. So therefore i'd like to check the rights from the user who's logging in, and than set the variables for the navigation to true or false.

I have two components for that: My navbar.component.ts and my login.component.ts. Inside my navbar.component.ts are Booleans (15) like this ->

canAddHardware
canChangeUserRights
canEditBlog
...

So now the user logs in, inside my login.component.ts and the onLogin() function gets triggerd. I'm calling my userRights.service.userHasRight('canAddHardware') for example, and than i need the Boolean inside my navbar.component.ts to be the value which gets returned from my userRights.service.userHasRight('canAddHardware') -> true or false

I tried so many things but i'm not able to figure out how to do this.

have you tried <can-add-hardware-element *ngIf="userRights.serivice.userHasRight('canAddHardware')>. If necessary you could have a function in your nav-bar component which calls the user rights service and returns the value rather than trying to reach out to it from the template — Farasi78
– Farasi78, Commented May 2, 2018 at 15:01
I already did that like you said Farasi. I implemented my service as condition onto my nav-menu-points but the problem is, that the service gets triggerd many times when the user clicks a link. I have about 15 - 18 menu points and every change the service is triggerd a hundred times and everything gets so damn slow. Thats why i need another solution — Sithys
– Sithys, Commented May 2, 2018 at 15:46

Mac_W · Accepted Answer · 2018-05-02 15:25:08Z

1

If this components are not siblings than you can create a message service like this:

export class ShareDataService {
messageSource = new BehaviorSubject<IMessage>({
    messageType: 'message',
    payload: 'something',
});
currentMessage: Observable<IMessage> = this.messageSource.asObservable();
changeMessage(message: IMessage) {
    this.messageSource.next(message);
}

}

Then from your login.component.ts you can then dispatch a message using a method like the below:

    sendMessage(message: MessageType, data: any) {
    const messageToSend: IMessage = {
        messageType: message,
        payload: data,
    };
    this.shareDataService.send(messageToSend);
}

And in your navbar.component.ts you can listen to that message in the ngOnInit for example:

        this.shareDataService.currentMessage.subscribe((message: IMessage) => {
          if (message === 'message') {
              this.canAddHardware = true;
          }
        });

answered May 2, 2018 at 15:25

Mac_W

3,0056 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sithys Over a year ago

and how would i do this for all of my menu points? How would i add another menu point inside your example?

Mac_W Over a year ago

Not sure if I understand - this solution is a general one on how to communicate between components which are not siblings. You emit a message whenever you want - in a method - and pass as payload whatever data you want. Then from the listening component you can access the payload and trigger logic accordingly.

Collectives™ on Stack Overflow

Change Boolean from another component in angular 4

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related