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

Looks like you're missing some of the HTML, see material.angular.io/components/chips/… — Aldin Bradaric
– Aldin Bradaric, Commented Jun 29, 2022 at 7:09

krzyhan · Accepted Answer · 2022-06-29 07:13:11Z

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>

answered Jun 29, 2022 at 7:13

krzyhan

1312 bronze badges

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

2 Comments

EMahan K Over a year ago

Can you edit my stackblitz?

krzyhan Over a year ago

stackblitz.com/edit/angular-sbrx2p-q6t4sx you stackblitz was almost good ;) just replace in app.component.html removeClick(fruit) with removeClick($event)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related