Event Emitter or other angle listeners

Question

Event Emitter or other angle listeners

Navigation

#1 by (0 votes)

0

Hello, I have a somewhat complicated challenge for me.

I need to create a generic form, where I pass a list of inputs and a list of buttons and my component performs the hard work, like presenting messages, putting on masks etc.

The list of inputs I was able to create normally, but I packed the button list.

I need to leave this form genius, so I can not limit the amount of buttons, I really need to pass a list to my compoenent, so I perform a * ngFor and distribute my list of buttons. In relation to that I can perform also, very calm. My problem is:

Let's suppose that in this list of buttons I have 2 buttons.

And in my parent component I have 2 methods: method1 and method2.

I need to find a way to click on my button1 of the generic form, it fires my method1 from the parent component, and if I click on my button2, it fires method2 from my parent component, and so on, according to the amount of buttons present in that list.

I tried to do with EventEmitter, but I can not build a list using it, because every new button in the list would have to add an @Output () in the compoenent.ts of the child.

Does anyone know a way to do this?

Thank you in advance ...

Edited question to requests in comments.

Adding the component.ts and component.html of the form.

In the component.ts I add to the buttons only the code below, passing a list of buttons and getting that way.

@Input () ListBoxes: BotoesModel [];

In my html already, I just do a * ngFor this way below:

<div *ngFor='let button of listaDeBotoes' class="{{container_btn_class}}">
    <button class="{{button.classStyle}} {{btn_class}}">{{button?.nome}}</button>
</div>

typescript componentes angular

asked by anonymous 26.06.2018 / 04:35

1 answer

Error to use mongodb filter List_Display in Django / Python

score 0 · Answer 1

Since the buttons should be agnostic, does it work if all the buttons call the same method from the parent and the parent is the one that forwards the correct method? A father knows all his children and knows what is best for them.

<div *ngFor='let button of listaDeBotoes' class="{{container_btn_class}}">
    <button (click)="funcaoDoPai(button.identificador)" class="{{button.classStyle}} {{btn_class}}">{{button?.nome}}</button>
</div>

Another option would be to have listaDeBotoes an indication of the callback that the button should call and when you are in ngFor creating the button, you pass that callback to ngClick . That is, theCallback is just a function that is in the parent.

<div *ngFor='let button of listaDeBotoes' class="{{container_btn_class}}">
    <button (click)="button.theCallback" class="{{button.classStyle}} {{btn_class}}">{{button?.nome}}</button>
</div>