CODEWITHSUNDEEP
angulartypescriptangular-pipe
mcheah
mcheah

Reputation: 1326

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

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!

Upvotes: 0

Views: 146

Answers (1)

saad shafiq
saad shafiq

Reputation: 162

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

Upvotes: 1

Related Questions