How to perform a function on one component and affect another component - Angular 6

Question

I would like to know how I can through one component affect another component at angular 6. These components are not father and son. They are distinct.

<app-navegacao></app-navegacao>
<router-outlet></router-outlet>

Where is Open/Closed Quotes is my navigation bar: ""

And where the table is my other component that is part of a router-outlet:

I want to run the event associated with the green button and send the values to my navigation bar

Answer 1

You can use @Service with a Behaviorsubject. Behaviorsubject contains the value that needs to be shared with other components, it at least is Observer and Observable it can receive and emit the current values.

You will need a Service with an attribute of type Behaviorsubject, in my example I created the same with type number and a default value 0, as below:

@Injectable()
export class QuoteService {
  public openQuotes = new BehaviorSubject<number>(0);

setOpenQuote(quotes : number){
   this.openQuotes.next(quotes);
}
}

In the Table component will be the place where you take the data, and send it to Behaviorsubject, then you need to inject the Service into the Table component, and in the method called by the green button, you will send the data:

construtor(
   quoteService : QuoteService 
){}

acaoBotaoVerde(){
   this.quoteService.setOpenQuote(quotesOpened);
}

And in the navigation component you will simply subscribe to monitor if the information changes:

construtor(
   quoteService : QuoteService 
){}

this.quotesOpen = this.quoteService.openQuotes.subscribe(
   (quotes) => {
     return quotes;
   }
);

Sure, this code can be optimized, but it helps you get an idea of what to use.

Answer 2

Below I will pass a very simple example of how to shoot and listen to events from different contexts, will be described what to do in each context.

CONTEXT - Green button component service:

import { EventEmitter } from '@angular/core'; //import necessario

public eventoEmit = new EventEmitter<boolean>(); // seu emissor de evento

public Click_BotaoVerde()
{
    //demais ações 
    this.eventoEmit.emit(true); // emitindo o evento
}

CONTEXT - Component menu

constructor(private _btnVerdeService: BtnVerdeService){

  this._btnVerdeService.eventoEmit.subscribe(x => {
      // Aqui você já esta ouvindo os eventos do btn verde
    });
}