How to access function from child component to parent component in angular

Question

Trying to access the remove function from child component(chips-autocomplete-example). But not able to access it in app.component. When i click the close (X) icon, i want to get the value of that. For example, if i click the Apple close icon, i want to get the Apple text in the alert. Same like for others(Lemon, Lime, Orange, Strawberry) I am doing this from the app.component ts file. But not working. How to resolve this?

app.component.ts:

  removeClick(removeval) {
    alert(removeval);
  }

app.component.html:

<chips-autocomplete-example
  (removed)="removeClick(fruit)"
></chips-autocomplete-example>

Demo: https://stackblitz.com/edit/angular-sbrx2p-k89gvp?file=app.component.ts

Answer 1

Not sure if I'm understand your problem correctly, but from child do parent (in the easiest way) you can use @Output() removed = new EventEmitter<string>(); and in remove function add this.removed.emit(fruit) in child and then in parent

<chips-autocomplete-example
  (removed)="removeClick($event)"
></chips-autocomplete-example>