Angular2- Passing states of flag between header and sidebar components

Question

I was working on Angular2 project where I have a folder called layout where I split common layouts of certain pages into 3 other components(3 folders-header,sidebar, and footer). I have an anchor tag(...) on my header. Upon hitting on it I need to extend the header upto the left end of screen and at the same time sidebar need to be hidden. On hitting the anchor tag again both should came into actual position(toggling). I tried like [ngClass]="{'hide-sidebar' : flags}" class="fix-header"...

where flags is a boolean variable and toggles it's value on hitting anchor tag. I stored the state of this variable in localStorage so that it can be accessed on sidebar, another component. but this helped me to extend header to left end of screen and sidebar remain unchanged.

I think there can be another logic for achieving both in same hit on anchor tag(button).

Answer 1

Communication using @input and @Output

if the components are in parent-child relationship eg navbar-component is in header-component template or header-component is in navbar-component template, then you can use angular @Input @Output decorators to pass data between components
More on @Input and @Output and Component interaction in angular documentation here

Communication Using Service

if these components are not directly related then, you can use a service to communicate between these components, where one component pushes data to service and the other gets it from the service, More on communication among components using a service is explained in Angular documentation here

Update: Siblings with Same Parent Communication Using @Input() @Output()

If you don't want to use service for communication and keep things less complex, you can use the common parent for sibling components.
Lets suppose the variable which you want to toggle resides in header component, now you create an EventEmitter in your header.component.ts like this

@Output() onToggle = new EventEmitter();  

then in the function where you toggle the variable, you can write this,

toggle() {
    if(this.flags === true) {
       this.flags = false;
    }else {
       this.flags = true;
     }
    this.onToggle.emit(this.flags);
    
}

then in your parent template, you'll bind the function to the header which will be executed when the above event is triggered, so in your parent template you can write this,

<app-header (onToggle)="notifySidebar($event)"></app-header>

And the notifySidebar method in you parent.component.ts will be like this,

notifySidebar(flags) {
   console.log(flags);
   this.flags = flags;
}

You need to define the above flags property (you can choose any name) in parent.component.ts, Now the final part, you need to tell the sidebar.component.ts that you flag property has changed, so you will define @Input() property in your sidebar.component.ts

@Input() flags: boolean;

and a method ngOnChanges (keep in mind to use ngOnChanges you need to implement OnChanges interface on your sidebar.component.ts more on OnChanges here )

ngOnChanges() {
  if(this.flags){
    //do whatever you want to do with flags
}
}

and the flags property will be passed to the sidebar from parent like this

<app-sidebar [flags]="flags"></app-sidebar>