Inject a service in Angular

Question

I'm currently working through a tutorial to learn angular. I've some problems a problem to reproduce and to understand the example on how to inject a service as dependency.

Angular version: 7.2.9

As more advanced debugging techniques were not yet covered I've tried to find the problem using console.log(...). I've added the following in my app.components constructor:

export class AppComponent {
  userLogin: UserLoginService;

  constructor() {
    console.log( this.userLogin );
    console.log( UserLoginService );
  }

This results in:

> undefined
> ƒ UserLoginService() {
        console.log('Hello world from the user login service.');
    }

The service is defined as

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

@Injectable({
  providedIn: 'root'
})
export class UserLoginService {
  constructor() {
    console.log( 'Hello world from the user login service.' );
  }
}

then I try to use it in app.components:

import { Component } from '@angular/core';
import { UserLoginService } from './user/user-login.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  userLogin: UserLoginService;

  constructor() {
    console.log( this.userLogin );
    console.log( UserLoginService );
  }
}

I do not understand why the member userLogin remains undefined . Any hint to pinpoint the problem would be much appreciated.

Answer 1

Please use as below

import { Component } from '@angular/core';
import { UserLoginService } from './user/user-login.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private userLogin:UserLoginService) {
    console.log( this.userLogin );

  }
}

Answer 2

First you should put your service in providers then inject that service in constructor when you put your service in the providers then a new instance of the service will get created.

import { Component } from '@angular/core';
    import { UserLoginService } from './user/user-login.service';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
      providers:[UserLoginService ]
    })
    export class AppComponent {


      constructor(private userLogin:UserLoginService ) {
        console.log( this.userLogin );

      }
    }