Get return value from parent function after emitting the function in child component

0
votes

I have Child component:

fixedheader.html

<button type="button" [hidden]="hideComponent()">
    Close
</button>

I want to hide it based on the return value from the function in the parent component.

fixedheader.ts

@Output() ComponentHidden: EventEmitter<any> = new EventEmitter();

hideComponent() {
    this.ComponentHidden.emit();
}

parent.html

<app-fixedheader [currentPage]="'SaleEdit'" [menuTitle]="viewTitle" [validForSave]="validForSave" (ComponentHidden)="ComponentHidden('salesEditComponentRef2')">
</app-fixedheader>

parent.ts

ComponentHidden(id: string): boolean {
    let component = this.componentsReferences.find(i => i.viewId == id);
    return (component === undefined ? true : false);
}

So here how I need to get the return value from the parent into child and it should be hidden based on that.

Did I miss something here ?

1
angularobservableeventemitter
If you want your child component to do something based on the parent component, your parent component should be inputting values into your child. Basically your function could set some flag in your parent component and you can input that flag into your child component which can then react to the change. - Mike S.
Can you try "ComponentHidden($event)" in parent.html? - Thorsten Rintelen

1 Answers

0
votes

If you want the child component hidden by the parent component, the parent must set a flag for that. Like this :

fixedheader.html

<button type="button" [hidden]="isHide">
    Close
</button>

fixedheader.ts

@Input() isHide : boolean;

parent.html

<app-fixedheader [currentPage]="'SaleEdit'" [menuTitle]="viewTitle" [validForSave]="validForSave" [isHide]="ComponentHidden('salesEditComponentRef2')">
</app-fixedheader>

parent.ts

ComponentHidden(id: string): boolean {
    let component = this.componentsReferences.find(i => i.viewId == id);
    return (component === undefined ? true : false);
}