In Angular can I use @Input as event emitter

Question

I like to explore the feasibility with using component Input as Event output, similar to how react does it.

Parent component

parentHandler(message){
   console.log(message)
}

Parent html

<child [myEvent]="parentHanlder"></child>

Child component

@Input myEvent

ngOnInit(){

this.myEvent('hello')

}

I am wondering if there are disadvantage or potential issue with this approach e.g memory/performance

thank you

Does this answer your question? [Angular 5 Component input function that takes parameters](https://stackoverflow.com/questions/48012662/angular-5-component-input-function-that-takes-parameters) — mr. pc_coder, Jul 04 '20 at 09:28
Not quite. I am aware that input and output both works, I want to know if there is potential issue with using @input only to handle event — Fan Cheung, Jul 04 '20 at 09:32

score 1 · Answer 1 · answered Jul 04 '20 at 09:52

This will work perfectly as expected.

The behavior will be similar to @Output except the context of execution.

The scope of execution will be with child component

export class AppComponent {
 version: number = 7;
  messageMe(param){
    alert("Message Me.."+param+this.version); 
  }
}

<framework
[messageHandler]="messageMe"></framework>


export class FrameworkComponent implements OnInit {
  @Input()
  messageHandler: Function;

  name="Jone";

  ngOnInit() {
    this.messageHandler(this.name);
  }
}

I know how these works I wonder is there any drawback with this approach — Fan Cheung, Jul 05 '20 at 10:29

score 0 · Answer 2 · answered Jul 04 '20 at 09:33

0

You can use setter in this situation

Parent:

<child [myEvent]="parentHanlder"></child>

Child (ts):

@Input()
set myEvent(parentHandler: string) {
     this.myEvent('hello');
}

answered Jul 04 '20 at 09:33

Majid Nayyeri

447
3
15

In Angular can I use @Input as event emitter

2 Answers2