CODEWITHSUNDEEP
angulartypescript
Dominion
Dominion

Reputation: 222

Angular 2 Output EventEmitter doesn't work

i have parent class like this:

export class BaseForm {
  @Output() public eventSubmit:EventEmitter<any> = new EventEmitter<any>();

  public emitForm() :void {
   const params = this.getParams();
   this.eventSubmit.emit(params);
  }

  public onSubmit(){
  if (!this.isValid) {
   return;
  }
  this.emitForm()
 }
}

And child:

@Component({
  selector: 'app-auth-form',
  templateUrl: './auth-form.component.html',
  styleUrls: ['./auth-form.component.styl'],

})
export class AuthFormComponent extends BaseForm { }

then i try to bind in another component like this:

<app-auth-form
  (eventSubmit)="tap($event)"
  [error]="error">
</app-auth-form>

tap is just display emited data. So, then i emit something in BaseForm i have nothing in logs. Any ideas?

Upvotes: 1

Views: 5877

Answers (3)

9ja Man
9ja Man

Reputation: 1

If you add a decorator to a child for example @Input and the parent already has an @Output emit event then the child will not respond to that out event. In this case you'll need to remove from child and add the @Input to the parent or in addition to the @Input in the child you also add the @Output to the child just like it is in the parent.

---Child will not respond to emitter inheritted from parent - THIS WILL NOT WORK
-Parent
    .
    .
    @Output emitter = new EventEmitter();
    .
    .

-Child extends Parent
    .
    .
    @Input foo = blah;
    .
    .

---Solution 1.

-Child extend Parent and include a declaration for @Output
    .
    .
    @Input foo = blah;
    @Output emitter = new EventEmitter(); //this will also be in the Parent
    .
    .

---Solution 2.
-Child - Remove the @Input from child and add it to the parent
    .
    .
    
    .
    .

-Parent
    .
    .
    @Input foo = blah; //This is no longer in the child only in the parent
    @Output emitter = new EventEmitter();
    .
    .

Both Soln. 1 and 2 will work.

Upvotes: -1

Daniel Kucal
Daniel Kucal

Reputation: 9232

Update:

By the end of November 2016 Angular's team has introduced decorators inheritance. Here are the rules to keep in mind when you want to use it:

  • class decorators are inherited, but never merged from parent into child class
  • ctor parameters and decorators are inherited if child class does not define an own ctor
  • we inherit decorators that are defined on a parent method / property into the - child class if the child class does not redefine this method / property
  • we inherit lifecycle methods

Source: https://github.com/angular/angular/issues/11606#issuecomment-261625522

Original answer:

Method / property decorators like @Input(), @Output()and class decorators like @Component(), @Directive() etc are not inherited. You have to add 

@Output() public eventSubmit:EventEmitter<any> = new EventEmitter<any>();

also to your child class to make it work.

Edit: here is an example of extending component I've made some time ago (popover extends tooltip) http://plnkr.co/edit/n5jCg3sK6VRu7fZfj7i2?p=preview

Upvotes: 7

Igor Costa
Igor Costa

Reputation: 184

You can't add that directly as @Input or as like @Component, doesn't work like that, you have to include the @Output as reference for the emitter, since doesn't inherited.

Upvotes: 0

Related Questions