1

To emit any click from child to parent we can make use of @output in the child and in parent html we can listen to that event using the way shown below

<app-item-output (newItemEvent)="addItem($event)">

in parent we can write method addItem($event) and do our work but is there any way to convert it into stream so that i can use it in combination with other observable.

One way I can think of now is having a subject in parent and then emitting a value like below to create a stream in parent

addItem($event) {
subject.emit()
}

But if we have any direct way to convert the event emitted from child into observable that would be better.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Darpan
  • 234
  • 3
  • 15
  • You might want to use a service to handle the comms between child and parent. As you say create a subject on the service have your child update the data using its "next" method and subscribe in the parent or vice versa. – Darren Street Dec 19 '20 at 13:21

1 Answers1

1

You can achieve that by using a ViewChild decorator.

<app-item-output #myChild></app-item-output>

@ViewChild('myChild') myChild: ItemOutputComponent;

ngAfterViewInit() {
  this.myChild.newItemEvent.subscribe(
    event => /** do something **/
  );
}

Try the described on stackblitz:

https://stackblitz.com/edit/angular-ivy-q9rcmk?file=src/app/app.component.ts

MoxxiManagarm
  • 8,735
  • 3
  • 14
  • 43
  • Yes in that case I do not need even '@output()' what you are doing in this way is taking the control from the child in the parent, but what i am more interested is in knowing any direct way using '@output()' without injecting the child instance in parent. – Darpan Dec 21 '20 at 04:58
  • I could not find any other way to do it directly so going ahead with @MoxxiManagarm approach – Darpan Jan 05 '21 at 05:33