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

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

    getSessionId() {}
}

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

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

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

    getSessionId() {}
}

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

• javascript
• angularjs
• angular

2 Answers 2

The scope for expressions in view bindings is limited to the the components class instance. There is no support to access statics, globals, types (enums), ... directly from the view.

To be able to refer to it in the view, it has to be accessible via the components class instance:

constructor(public utilsService:UtilsService) {}

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

As usual Gunter answer is perfect, I just wanted say that expose those function on view which are necessary. Don't expose everything from a service on view (Law_of_Demeter).

View

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

Component Class

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