looking for some solutions? You are welcome.

SOLVED: Angular get status of all children components from parent component

Rajiv:

I have components 'Parent' and 'Child'.From Parent we can add or remove child. so children are dynamic. in Parent I have rendered Child component in loop like below

Parent.component.html

<child *ngFor="let child of children" [data]="child"></child>

Now in child component I have added a function called IsValid() to check child is valid or not

Child.component.ts

IsValid()
{
  //check validity of component and return true if valid else false
}

in parent component I have a button called 'Save' I have to enable that button if all child's are valid else need to disable that button.

So I need a way to call Child components IsValid function for each child component from Parent and then determine the validity result and apply it to Save button to enable or disable

What I have tried

1. I have emited valid or invalid result from child to parent and if any childs result is invalid i have disabled save button.

but problem here is : if I have added one child, make it valid, save button will be enabled. now I have added another child which is invalid so save button will be disabled but if I remove invalid child save button will be disabled though we have only one child which is valid.. since IsValid event get emmited only if current child get change.

2. I can use something like this

<child #varName></child>

@ViewChild('varName') childElement;

and then from parent I can call

childElement.IsValid() 

but since I have rendered childrens in loop how to give unique name in loop and how to add reference to that unique HTML tag in ts file.

Any help will be appreciated. Thanks



Posted in S.E.F
via StackOverflow & StackExchange Atomic Web Robots
Share:

No comments:

Recent