Angular - two output-events in one component, but only one works

Question

I want the child component to emit two different events in it`s parent Component, depending on which button the user clicks. The first one (onSelectedKat) works fine. But the second one (onAllClick) doesn´t work. It has the same structure like the first one, I just changed the names.

I tried to skip all the unnecessary code, so it doesn´t get too confusing.

This is the html code of the child. It has two buttons, which call the two different functions on click. These functions in turn, call the emitter-functions.

<a (click)="selectKat(kategorie.name)" class="btn btn-default btn-kat" role="button">{{kategorie.name}}</a>

<a (click)="clickAll()" class="btn btn-default btn-kat" role="button">Alle</a>

This is the code of the child. Here it gets stuck in the clickAll() function. The console.log works, but everything after that doesn`t.

import { EintraegeComponent } from '../eintraege/eintraege.component';

@Component({
  selector: 'app-kategorien',
  templateUrl: './kategorien.component.html',
  styleUrls: ['./kategorien.component.css'],

})
export class KategorienComponent implements OnInit {

  @Output() onSelectedKat = new EventEmitter<string>();
  @Output() onAllClick = new EventEmitter<any>();

  constructor() {}

  ngOnInit() {}

  selectKat(name: string){
    this.onSelectedKat.emit(name);
  }

  clickAll(){
    console.log("clicked in child works");
    this.onAllClick.emit();
  }

}

And this is the code of the parent. However the onAllClick() in that one is never called.

@Component({
  selector: 'app-eintraege',
  templateUrl: './eintraege.component.html',
  styleUrls: ['./eintraege.component.css']
})
export class EintraegeComponent implements OnInit {

  eintraegegeordnet:boolean;
  toFilter:string;

  constructor() { 
      this.eintraegegeordnet = false;
    }

  ngOnInit() {}

  onAllClick(){
    console.log("Click in parent works");
    this.toFilter = "boo";
    this.eintraegegeordnet = false;
  }

  onSelectedKat(name:string){
    this.eintraegegeordnet = true;
    this.toFilter = name;
  }   

}

Can anyone tell me what I´m doing wrong and why one of them works and the other doesn`t?

can you add the parent HTML in which it listen to onAllClick? plus try to remove <any> from the EventEmitter, because in this case it expect to <any> data. — Raed Khalaf
– Raed Khalaf, Commented Jul 11, 2017 at 14:40
ohh I see what you mean, I totally forget to add the function in the html. Thanks for the hint, I just try to add it and look if it works! — Tobsi
– Tobsi, Commented Jul 11, 2017 at 14:47

Tobsi · Accepted Answer · 2017-07-11 14:57:52Z

1

Thanks for the Hint from Raed Khalaf, it now works. I forgot to add the function in the Parent HTML.

<app-kategorien (onSelectedKat)="onSelectedKat($event)" (onAllClick)="onAllClick($event)"></app-kategorien>

answered Jul 11, 2017 at 14:57

Tobsi

511 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

Angular - two output-events in one component, but only one works

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related