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

Question

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

Asked 6 years, 1 month ago

Viewed 2,064 times

1

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

Have you tried using a Service that has a Behaviorsubject ? In the table component you enter content in Subject, and in the navigation component you give a subscribe in the same... already tried?

– rafaelmacedo

2018/10/02 at 18:38
I didn’t know that possibility. How does this work?

– Leonardo Vinicius

2018/10/02 at 18:39
I will formulate an answer to exemplify you.

– rafaelmacedo

2018/10/02 at 18:41
My opinion: The bar would be in the parent component and the component below would enter through navigation through the <router-outlet></router-outlet>. So just use it Eventemitter to notify the parent component whenever something happens in the child component.

– Marconi

2018/10/03 at 17:22

2 answers

Browser other questions tagged typescript javascript-events angular-6 angularjs-components

You are not signed in. Login or sign up in order to post.

by rafaelmacedo • **151** points · Answer 1 · 2018-10-02T19:02:19+00:00

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.

by Emerson Dias dos Santos • 85 points · Answer 2 · 2018-10-03T17:18:01+00:00

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
    });
}