Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 @Output parameters

Tags:

angular

Im trying to pass parameters through @Output but the fired function just receive 'undefined'. Can someone please show me the way to pass parameters through the EventEmitter of the @Output? For Example:

var childCmp = ng.core.Component({
             selector:'child-cmp',
             outputs: ['myEvent']
             }).Class({
               constructor: function(){
                            this.myEvent = new ng.core.EventEmitter();
                            this.myEvent.emit(false);
                            }
             });
var parentCmp = ng.core.Component({
              selector:'parent-cmp',
              template:'<child-cmp (myEvent)="invoke()"'></child-cmp>',
              directives: [childCmp]
           }).Class({
                constructor:function(){},
                invoke: function(flag){
                    // here flag is undefined!!
                }
             });
like image 678
Ron Avraham Avatar asked Jan 21 '16 07:01

Ron Avraham


People also ask

How do I use @output in angular?

An @Output() property should normally be initialized to an Angular EventEmitter with values flowing out of the component as events. Just like with @ Input () , you can use @ Output () on a property of the child component but its type should be EventEmitter .

When to use @output and EventEmitter in angular?

Conclusion When you want to share data between two-component, you will have to use @Input and @Output with EventEmitter. We use EventEmitter to notify data changes from child component to parent component. Understanding @Output and EventEmitter in Angular Table of Content 1.

What is input property in angular?

Angular 9, Angular 10, Angular 11, Angular 12 Input decorator marks the property as the input property. I.e it can receive data from the parent component. The parent component uses the property binding to bind it to a component property. Whenever the value in the parent component changes angular updates the value in the child component.

What is @output decorator in angular?

@Output decorator binds a property of a component to send data from one component (child component) to calling component (parent component). This is one way communication from child to parent component. @Output binds a property of the type of angular EventEmitter class.


1 Answers

You shoud use the following to get the value provided with the event:

<child-cmp (myEvent)="invoke($event)"'></child-cmp>'

This way the invoke method of your childCmp will receive as parameter the value you provide when emitting the myEvent custom event.

Hope it helps you, Thierry

like image 161
Thierry Templier Avatar answered Oct 19 '22 03:10

Thierry Templier