Angular How to change values with an boolean value in separet components with service-CodePudding

I'm new in Angular I just want to make one simple thing that I'm having a lot of problems, I created two components header and main, in the header there is the toggle button and in the main there is the sidenav and I wanted to make this button in header to hide and show the sidenav in main component on click. I tried some aproeches. At the beggining I realized that I needed to use services because is not child and parent components.

(On Toggle.service.ts)

import { Injectable } from '@angular/core';

@Injectable({
      providedIn: 'root'
    })
    export class ToggleService {
    
        choice = true;
    
        toggle() {
          this.choice = !this.choice;
        }
    }

(On Header.component.ts)

import { Component, OnInit } from '@angular/core';
import { ToggleService } from '../../services/toggle.service';


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

  constructor(private myservice: ToggleService) { 
    
  }
  ComponentToggleMenu() {
    this.myservice.toggleMenu();
 }
  ngOnInit(): void {
  }

(On Header.component.html)

<button (click)="ComponentToggleMenu()"><i >menu</i></button>

(On Main.component.ts)

import { Component, OnInit } from '@angular/core';
import { ToggleService } from '../../services/toggle.service';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css'],
})
export class MainComponent implements OnInit {
  boolean = this.myservice.choice;


  constructor(private myservice: ToggleService) {}

  ngOnInit(): void {

  }

}

(On Main.component.html)

<mat-sidenav  mode="side" [opened]="boolean">

That was the way that I'd like to work, but the funtion it's only change the value in the service and not in main, I tried a lot of things, I saw videos, angular documents, I tried to use subjects , observables, EventEmiter but none of this things works, and I'd like a method that could be work for any value that I wanted to change in any diferent separet component, but i'm seing that this comunication beetwen components it's too hard, should be more easy in my opnion, and yes it's quiet ease to tranfers functions and variables beetwen components using services but make a component change a value in other it's quiet hard, and I'd like to also know if Vue is best in this part.

CodePudding user response：

boolean in MainComponent will not be updated because this.myservice.choice is not a pointer.

You can directly refer the service value from your template.

<mat-sidenav  mode="side" [opened]="myservice.choice">

And also you have to change myservice from private to public for refering from template.

constructor(public myservice: ToggleService) {}

CodePudding user response：

The problem is that you're setting boolean = this.myservice.choice, but it's a primitive value, not a reference to an object. Therefore, boolean will not change when this.myservice.choice does.

Instead, you should bind the opened property in your mat-sidenav directly to myservice.choice. You'll also need to make myservice so that your template can access it.

<mat-sidenav  mode="side" [opened]="myservice.choice">