AnchovyLegend AnchovyLegend - 10 months ago 49
TypeScript Question

Binding functions within service layer to template

I am trying to separate out the service related functions from the login page component and I am currently getting some errors along the lines of

self.context.logout is not a function
. Below, I am trying to inject the loginService into the loginPage and then bind some of the functions within the service to my login template. Any ideas why I am getting these errors? thanks in advance!


import { Injectable } from '@angular/core';

export class LoginService {
constructor() {
console.log('constructor logic');

checkLoginStatus() {
console.log('login logic');

logout() {
console.log('logout logic');


import { Component } from '@angular/core';

selector: 'page-login',
templateUrl: 'login.html',
providers: [LoginService]
export class LoginPage {

constructor(loginService : LoginService) {



Template File

<button class="login-button" on-tap="loginService.checkLoginStatus()">
Log In
<button class="login-button" on-tap="loginService.logout()">
Log Out

Answer Source

You need to give the service in the constructor an access modifier, or else it is only scoped to the constructor

// constructor(loginService : LoginService)
constructor(public loginService : LoginService)