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>

Answer 1

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.