Angular 2 listen to custom event inside component

Question

What I intend to do is to create a custom event to which I'll listen inside the same component that is created;

events.component.ts

    @Component({
    moduleId: module.id.replace("/dist/", "/"),
    selector: 'event-bind-c',
    template:`
             <button (click)="onClicked()">Component click</button>
             <input (clicked)="showIt($event)" [placeholder]="emitted_val">
            `
})
export class EventBindingComponent implements OnInit {
    toggled_value:boolean = false;
    emitted_val:string;

    constructor() { }

    ngOnInit() { }

    @Output() clicked = new EventEmitter<string>();
    onClicked = () => {
        //alert("Inside of component");
        this.clicked.emit("It works!");
    }

    showIt = (event_val:string) => {
        alert("event_val:" + event_val);
        this.emitted_val = event_val;
    }
}

If I use it outside of the component(in parent) it works

app.component.ts

@Component({
  selector: 'my-app',
  template: '<event-bind-c (clicked) = "onParentClicked($event)"></event-bind-c>',
})
export class AppComponent  { 
 onParentClicked= (value:string) => {
   alert("Outside of component "+value);
 }
}

Günter Zöchbauer · Accepted Answer · 2016-12-13 15:29:45Z

2

That's not supported.

Only the parent component can bind to an event emitted by an @Output()

Why don't you just call this.showIt() instead of emitting an event?

answered Dec 13, 2016 at 15:29

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sTx Over a year ago

I was going through a tutorial and just wondering if I need to listen to a custom event inside the same component how would I do that. I couldn't find on the internet.

Günter Zöchbauer Over a year ago

As I said, it's not supported. If you mean DOM events, then you bind the same way as to events from outputs.

Collectives™ on Stack Overflow

Angular 2 listen to custom event inside component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related