Get value from Angular 4.5 component in template

I am working on Angular 4.5, within I have self contain folder with its component, template and service. I have method Injectable service

Service

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

@Injectable()
 export class MsalService
{
   getProduct(): string
   {
      return "12 Apples";
   }
 }

and component where I am intended to call this service and print value from getProduct() into template as;

Login Component

 import { Component } from '@angular/core';
 import { Location} from '@angular/common';
 import { MsalService } from '../Services/msal.service';

 @Component({
  selector: 'auth-login',
  templateUrl: './Login.Template.html',
  styleUrls: ['./Login.Style.scss'], 
  providers: [MsalService]
 })

  export class Login{

    constructor( private msalService: MsalService){
  }

  public pageTitle: string = "testing .....";

  getService() : void{
      this.msalService.getProduct();
  }

} 

template where I am trying to call method from login component and print value in template when click event happened

Login Template

<div class="panel-heading">
     {{pageTitle}}
</div>

<a class="btn btn-link"  (click)="getService()">Login</a>

finally I need to call this whole function in another component as;

another module

import { Login } from '../security/login/login.component';

@NgModule({
imports: [
 Login
  ]
})

 export class LayoutModule {
}

another template where I want to use login method to call which is separate complete function and for simple, print value from method

getService() : void{
          this.msalService.getProduct();

 <p><auth-login></auth-login></p>

2 answers

  • answered 2018-01-14 11:38 Eldho

    Assuming you need to print the value.

     getService(){
       return this.msalService.getProduct();
     }
    

    or Else

    yourProperty:string;
    
    getService() : void{
          yourProperty = this.msalService.getProduct();
      }
    

    Template

    <html>
    <p>{{ getService() }}</p>
    </html>
    
    
    <html>
     <p>{{ yourProperty }}</p>
    </html>
    

  • answered 2018-01-14 11:38 toxic

    this is how I print component method return value in template.

    getService() : string{
           return this.msalService.getProduct();
      }