Md Ghouse Md Ghouse - 2 months ago 12
TypeScript Question

How can i controll parent Html from @Output value to my parrent

Here i have two component HrComponent And appcomponent How can i controll

IsBoolean
from my HrComponent

HrComponent

@Input()LoginName: string;
IsBoolean: boolean = false;

@Output()BooleanExp: EventEmitter<boolean> = new EventEmitter<boolean>();

onSelectChange() {
this.BooleanExp.emit(this.IsBoolean);
}


appcomponent

Name: string = "Hello"
<div>

<HrSelector [LoginName]="Name">
<span>{{LoginName}}</span>
<div *ngIf="IsBoolean">
<p>This is Special Div</p>
</div>
</HrSelector>
</div>

Answer Source

You need to do the following:

 <HrSelector [LoginName]="Name" (BooleanExp)="onChange($event)">
        <span>{{LoginName}}</span>
        <div *ngIf="IsBoolean">
            <p>This is Special Div</p>
        </div>
 </HrSelector>

In your ts, define the onChange method:

onChange(event) {
    this.IsBoolean = event;
}