How to handle iterating over array of child-types in Angular html?

Question

I have an array of items that are similar to a FormControl - but each item is a child type of FormControl, each extending different methods for use. When I use *ngFor to iterate over an array: FormControl[] and call the child method inside, like so:

<ng-container *ngIf="formControl.type == 1">
    <button (click)="formControl.someFunction()">Type 1 function</button>
</ng-container>

I get a type error saying that someFunction() does not exist on FormControl. This makes sense to me, as it's correct, but how would I properly deal with this situation in Angular?

I have already tried creating a pipe that takes a FormControl and returns its child type, which works sometimes, but fails in an action expression (error: Cannot have a pipe in an action expression).

Is there any way to cast inside the Html? Or is there another way I should type my array of formControls? I tried (ChildType1 | ChildType2 | ChildType3 | FormControl) but that did not work either.

Thanks!

saad shafiq · Accepted Answer · 2020-10-28 18:04:22Z

1

What I would do is access the child function inside the .ts file.

<button (click)="someFunction()">Type 1 function</button>

In .ts file

someFunction() {
  parent.childfunction()
}

answered Oct 28, 2020 at 18:04

saad shafiq

1616 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mcheah Over a year ago

yeah that definitely works, thanks. It is a little inconvenient to have to re-define all of those class functions again in the component. I was hoping that there was some typescript feature I didn't know about or understand, but I guess I'll take what I can get

saad shafiq Over a year ago

Well I'm glad that it helped, but if you find something better do comment

Collectives™ on Stack Overflow

How to handle iterating over array of child-types in Angular html?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related