CODEWITHSUNDEEP
javascriptangularevent-binding
optimus
optimus

Reputation: 856

How to bind event from child to parent component in Angular 2+ in ngSwitch

My parent component calls the child component with a ngSwitch case:

<div *ngSwitchDefault>
   <app-child-comp (toggleHelp)="toggleHelp($event)"></app-child-comp>
</div>

And in the child component:

@Output() toggleHelp = new EventEmitter();
this.toggleHelp.emit(true);

And in the parent component:

toggleHelp() {
  console.log('event fired');
}

So far no success. If I call the component without ngSwitch, then it works fine. Any help would be appreciated.

Upvotes: 2

Views: 1270

Answers (1)

Sangwin Gawande
Sangwin Gawande

Reputation: 8166

This works fine:

Parent HTML :

<div [ngSwitch]="valuess">
  <div *ngSwitchCase="1">11111111111111111</div>
  <div *ngSwitchDefault>
    <app-child (toggleHelp)="toggleHelp($event)">

    </app-child>
  </div>
</div>
<a (click)="changeValue()">valuess</a>

Parent TS :

valuess = 1;
toggleHelp(evt) {
    console.log('event fired',evt);
}
changeValue(){
    this.valuess = 2;
}

Child HTML :

 <a (click)="toggleHelpCall()">toggleHelp</a>

Child TS :

export class ChildComponent implements OnInit {
    @Output() toggleHelp = new EventEmitter();
    constructor() { }

    ngOnInit() {
    }
    toggleHelpCall() {
        this.toggleHelp.emit(true);
    }
}

Upvotes: 1

Related Questions