Angular 2: Use (click) to invoke function in service

Question

I want to invoke a function from a service that I created when you click on something, but I can't get it to work. I simplified it as much as possible just to see if this type of functionality is even possible.

I have the following HTML:

<a (click)="SellingVarietiesService.goToVarietyDetails(3)">Test</a>

Here is the code for the function I want to invoke:

@Injectable()
export class SellingVarietiesService {    

    constructor(private http: Http) { }

    public goToVarietyDetails(varietyId: any): void {        
        console.log(varietyId);
    }
}

The HTML is being generated via .NET/C# and returned from an HTTP call in a service I created. Is it possible to invoke that function in my service with the HTML that is being returned to me? Do I just have the syntax wrong?

EDIT:

I used DomSanitizer on the HTML that I returned (the HTML that contains the (click) function). Here is the code from my component that used it:

// Get Variety List
getVarietyList() {        
    this.sellingMenuService.getVarieties().subscribe(res => {            
        this.varietyListSelling = this.sanitizer.bypassSecurityTrustHtml(res);
    });
}

And here is the HTML where that gets placed:

<div *ngIf="varietyListSelling" [innerHtml]="varietyListSelling"></div>

Here is an example of the what res might look like:

<div class="varietyName">
    <a class="" (click)="sellingVarietiesService.goToVarietyDetails(1176)" >Starbor</a>
    <a href="#deleteVarietySelling" id="deleteVarietySelling_1176" class="quick-delete fa-minus-button" title="Delete" data-toggle="modal">
        <i class="fa fa-minus"></i>
    </a>
</div>

I added to the end of my post. Notice (click)="sellingVarietiesService.goToVarietyDetails(1176) is there, yet doesn't work. — Bryan, Oct 16 '16 at 19:45
See http://stackoverflow.com/questions/40063791/firing-events-from-dynamically-added-html or use dynamic component loading like http://stackoverflow.com/questions/39410355/how-to-use-variable-to-define-templateurl-in-angular2 — yurzui, Oct 16 '16 at 19:49
I tried the first one and changed my code to this: this.elRef.nativeElement.querySelector('a.testClick').addEventHandler('click', this.getVarietyDetails.bind(this)); It gave me this error: Cannot read property 'addEventHandler' of null — Bryan, Oct 16 '16 at 20:42
i add "testClick" class to the anchor tags with the (click) functions — Bryan, Oct 16 '16 at 20:42
If I were to return JSON data instead of HTML and format it with Angular 2, would that solve my problem? Or would I still need to use dynamic component loading? — Bryan, Oct 17 '16 at 17:05

score 3 · Answer 1 · answered Oct 16 '16 at 18:34

3

You need to inject service into component that hosts your html

@Component({
  template: `<a (click)="svs.goToVarietyDetails(3)">Test</a>`
})
export class MyComponent {
  constructor( public svs: SellingVarietiesService) {}
}

Then you can access it through component property.

answered Oct 16 '16 at 18:34

Sasxa

40,334
16
88
102

Yup, I did that, but it still isn't working. I'm wondering if it is because the HTML is served up from my .NET backend. I don't know if that would cause issues but I can't think of any other reason... – Bryan Oct 16 '16 at 18:51
If that's the case look into [DomSanitizer](https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html) – Sasxa Oct 16 '16 at 18:57
I updated my post to show how I used DomSanitizer. Is there a different way I need to be using it? – Bryan Oct 16 '16 at 19:03
Property is `innerHTML`, not `innerHtml` (: – Sasxa Oct 16 '16 at 19:07
AFAIK the `innerHtml` property works like standart property `innerHTML` – yurzui Oct 16 '16 at 19:33

Angular 2: Use (click) to invoke function in service

1 Answers1