Share button event between components in an Angular project

Asked

Viewed 203 times

1

I need guidance please, I have a component structure in an Angular design:

1) Head component

2) Body component and within it the Rodape component

The button inside the Header component needs to show/hide the <div> which are within the other components, in the case of <div class="card"></div> and the <div class="footer></div>.

Example:

Cabecalho.html component:

<button (click)="toggleShow()">Esconder / Exibir</button>

Component Cabecalho.ts:

isShown: boolean = false;


toggleShow() {

this.isShown = ! this.isShown;

}

Component Body.html:

<div class="card" *ngIf="isShown">
  <p>Conteúdo</p>
</div>

And within the Body Component the Rodape Component:

<div class='footer' *ngIf="isShown">
  <p>&COPY;</p>
</div>

Can you help me?

angular typescript

  • We don’t know how the hierarchy of your folders is in the project, but depending on how it is used eventEmitter() ,or, the most suitable one would be a service.

  • I tried to use the eventEmitter(), but I’m new to Angular, I couldn’t understand how to apply it yet. Could you help me? The folder structure and as I described above: header, body and inside Rodape body. Thank you.

  • The cable component is not the parent of the other components so Mitter will not work will have to do this using a service.

  • Yes, the header is not the father, he is brother of the body component, the rodape component is child of the body component, the best solution would be a service? can help me?

  • So I’m tight here on the trampo hj but gives a search on behaviorSubject, this link is very good and in Portuguese you can understand cool, if you follow the steps there you will probably be able to do what you want: https://medium.com/xp-inc/sharedata

  • Thank you Leandrade

  • You got it right there, Munir?

  • Opa Leandrade, okay? Actually not yet, I was trying to use the @input developer, you can give me a strength using this feature?

  • With @Input it won’t work because they are sibling components and not each other’s child other than body and footer, but because you couldn’t use service? That link passes td you need!

Show 4 more comments

1 answer

0

Since the header component is not the parent of the other components, it is recommended to use the Behaviorsubject in an angular service.

Creating a service

You will need to create a new service for the header, you can choose to create a manually:

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

@Injectable()
export class CabecalhoService {

  private dataSource = new BehaviorSubject(false);
  data = this.dataSource.asObservable();

  constructor() { }

  updateToggle(toggle: boolean) {
    this.dataSource.next(toggle);
  }

or you can use the commands of Angularcli: ng generate service header and add Behaviorsubject; Right after you must enter this service in your module:

...
@NgModule({
  ...
  providers: [CabecalhoService]
  ...
})
...

Mode of use

Now that you already have the service you should "call it" in the components you want to use:

constructor(
    ...
    private cabecalhoService: CabecalhoService
  ) { }

Now you can use your component, we will start with the header component. in its "toggleShow(...)":

this.cabecalhoService.updateToggle(this.isShown);

And done, your header is already sending the data to the service, now in the components you should use:

ngOnInit() {
 this.cabecalhoService.data.subscribe(data => {
  // faça o que for necessário quando os dados forem alterados
  })
}

You can learn more about angular services on Tour of Heroes of the Angular, however there do not use the Behaviorsubject.

  • Thank you mtwzim! I will try to implement this way.

Browser other questions tagged angular typescript

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