Call function from the DOM - Angular 2

Question

Is there a way to call the function defined in the service from the DOM, I can call the component function from the DOM, but how can we call the service function, something like this:

@Injectable()
export class UtilsService {
    constructor() {}

    getSessionId() {}
}

<button name="getsession" (click)="UtilsService.getSessionId()">Get Session</button>

Answer 1

The scope of expressions in the view binding is limited to an instance of the component class. There is no support for accessing statistics, global variables, types (enumerations), ... directly from the view.

To be able to refer to it in the view, it must be accessible through an instance of the component class:

constructor(public utilsService:UtilsService) {}

<button name="getsession" (click)="utilsService.getSessionId()">Get Session</button>

Answer 2

, , , , . ( Law_of_Demeter).

<button name="getsession" (click)="getSessionId()">Get Session</button>

export class MyComponent {
    getSessionId: any;
    constructor(private utilsService:UtilsService) {
       this.getSessionId = utilsService.getSessionId;
    }
}