How correctly get a change of the child component of the parent?

Question

I have nested components of the following construction:

app.parent.component > app.container.component > app.containeritem.component 

For example:

app.parent.component

import ...
@Component({
    selector:'parent',
    template: '<container></container>,
    ....
})

app.container.component

import ...
@Component({
    selector: 'container',
    template: '<containeritem></containeritem>',
    ...
})

app.containeritem.component

import ...
  @Component({
        selector: 'containeritem',
        template: `<ul><li draggable="true"(dragend)="update.emit($event)">lorem</li></ul>`
        ...
    })

Inside app.child.component i emitting drag action. So, how i can correctly get action data of app.containeritem.component in app.parent.component ?

Answer 1

You just pass the event up with Output s and EventEmitter s:

app.parent.component

import ...
@Component({
    selector:'parent',
    template: '<container (onDrag)="doSomething($event)"></container>,
    ....
})
export class ParentComponent {
    doSomething(event) {
        console.log(event);
    }
}

app.container.component

import ...
@Component({
    selector: 'container',
    template: '<containeritem (onDrag)="onDrag.emit($event)"></containeritem>',
    ...
})
export class ContainerComponent {
    @Output onDrag: EventEmitter = new EventEmitter();
}

app.containeritem.component

import ...
@Component({
    selector: 'containeritem',
    template: `<ul><li draggable="true"(dragend)="onDrag.emit($event)">lorem</li></ul>`
    ...
})
export class ContainerItemComponent {
    @Output onDrag: EventEmitter = new EventEmitter();
}