angulartypescriptpublic-method

Angular2 self.parentView.context is not a function

I've got a button element in my *ngFor list item:

<li class="cart__item" *ngFor="let item of cartService.cart$ | async">
  <button class="button button--decr" (click)="decrItem()">-</button>
     <form action="#">
        <input type="text" id="qnt" maxlength="3" readonly="readonly" value="{item.qnt || 0}}">
     </form>
  <button class="button button--incr" (click)="incrItem()">+</button>                
</li>

In my service I created a public method (just for testing purpose)

incrItem() {
    alert("Test!")
}

Clicking on my button and calling incrItem() function causes the error:

Error in ./AppComponent class AppComponent - inline template:63:13 caused by: self.parentView.context.incrItem is not a function

I can't understand the cause since I imported my CartService (where I created the public method) component into AppComponent (where is my button rendered).

And my method is public, so I can use it in the entire app. Didn't find working solution to me in similar questions.

Solution

  • Just move incrItem method from service to your component class.

    You have to use component properties and methods as context for your template