Why does not work function in Angular 2 Typescript is called from template?

Question

I have a following tag:

<tag-input hideForm="true" [onRemoving]="onRemoving"></tag-input>

Where [onRemoving]="onRemoving" is function is called by attempts to delete value.

It looks like:

public onRemoving(tag: any): Observable<any> {

    let del = '';

    this.translate.get('confirmation_text').subscribe((res: string) => {
      del = res['confirmation_text'];
    });
}

Problem is in this code:

this.translate.get('confirmation_text').subscribe()...

I get an error:

TypeError: Cannot read property 'get' of undefined

I think cause is in area of visibility of this context

Constructor:

constructor(private translate: TranslateService) {
}

Can you add your constructor, where the dependency injection should happen? — Akkusativobjekt, Jan 26 '18 at 10:33
I think I can not get access to global `this` of class, it works only with local this of `tag-input`; — Jessie, Jan 26 '18 at 10:35
` this.translate.get('confirmation_text').subscribe((res: string) => { del = res['confirmation_text']; });` — Jessie, Jan 26 '18 at 10:37
I think I need this: `public onRemoving(tag: any, th?:this): Observable {}` — Jessie, Jan 26 '18 at 10:38
No. it should work. Check that TranslateService has @Injectable() annotation — Mike Adamenko, Jan 26 '18 at 10:42
Function is called from template context: `[onRemoving]="onRemoving"`. — Jessie, Jan 26 '18 at 10:43
Write in constructor the following `this.onRemoving = this.onRemoving.bind(this)` — yurzui, Jan 26 '18 at 11:00

Mike Adamenko · Accepted Answer · 2018-01-26T13:11:30.423

3

change [onRemoving]="onRemoving" to (onRemoving)="onRemoving($event)"

It might be useful Angular2, ng2-tag-input prevent duplicate value on editable

edited Jan 26 '18 at 13:11

answered Jan 26 '18 at 10:48

Mike Adamenko

2,944
1
15
28

And how to pass parameter to `"onRemoving()"`? – Jessie Jan 26 '18 at 10:48
It does not work, it removes tags without confirmation in this case – Jessie Jan 26 '18 at 10:51
May be `(onRemoving)="onRemoving($event)"`? – Jessie Jan 26 '18 at 10:52
yes, you can use $event as param if you want to pass browser's event object – Mike Adamenko Jan 26 '18 at 10:57
I tried, It does not work, it removes tags without confirmation in this case – Jessie Jan 26 '18 at 10:59
look at https://stackoverflow.com/questions/36006894/angular2-get-clicked-element-id – Mike Adamenko Jan 26 '18 at 11:03
`(onRemoving)="onRemoving($event)"` – Jessie Jan 26 '18 at 11:05
And component is: `public onRemoving(tag: any): Observable {}` – Jessie Jan 26 '18 at 11:06

Why does not work function in Angular 2 Typescript is called from template?

1 Answers1