Angular 2 listen to custom event inside component

sTx

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

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?

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Angular2 Html inside a Component

Angular 2 - formControlName inside component

Angular 2 Component listen to change in service

Angular 2, component inside main component

Angular 2 - How to listen to event without a template?

Angular 2: Do something with @Input inside Component

Custom angular2 form input component with two way binding and validation inside a component

Call Jquery Method inside Component Angular 2

Angular 2 child component receive ancestor event

Event custom event from main vue instance, listen from component

Multiple child component inside form - Angular 2

Extending a PrimeNg component inside Angular2

dhtmlx inside angular2 component

Angular 2+ pass directives to a custom component

Angular 2: Wrapping a component inside a parent component

component inside component Angular

Angular 2 emit event to application root component

Angular 2 Event listener on document inside a component

Angular 2 Component global variable is undefined inside Reactive Form controller valueChanges event

Angular 2 declaring dynamic property inside component

Angular 2 bind to custom event

Angular 2 - test callback to an event in the child component

Angular 2 custom validation not calling inside of component function

Angular2 directive listen to parent component callbacks or changes

How to "catch" onMouseWheel-Event inside a custom component

How to listen to mousemove inside angular material dialog component?

How to implement a pseudo event for a custom component in Angular?

listening to javascript custom event inside vuejs component

Fire change event in custom angular form component