Passing data from Angular service

Question

I have a basic method inside a constructor to calculate the current month of the year and output the value to the HTML . However, I can't seem to get it to work.

I'm new to Angular 2 and TypeScript, so this may just be a silly mistake on my behalf :)

calendar.service.ts file:

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable()
export class GetMonthsService {
  private GetMonthsRef = this.fbDB.list('xxxx/xxxx/months');
  private GetDaysRef = this.fbDB.list('xxxx/xxxxx/months/Days');
  private currentMonth;

  constructor(private fbDB: AngularFireDatabase) {}

  getMonthsList() {
    return this.GetMonthsRef;
  }

  getDaysList() {
    return this.GetDaysRef;
  }

  getCurrentMonth() {
        let currentMonth;
        let d = new Date();
        return this.currentMonth = d.getMonth();
        }

}

home.html:

<ion-content padding>

    <ion-list-header>
      Current Month Page
    </ion-list-header>

          {{currentMonth}}

</ion-content>

getCurrentMonth is weird why not just return (new Date()).getMonth(). do you know getMonth return int 0..11? — Philip Brack
– Philip Brack, Commented Nov 10, 2017 at 22:57
could you post the component detail, where you want to use this service? — mohit uprim
– mohit uprim, Commented Nov 11, 2017 at 3:06

Prithivi Raj · Accepted Answer · 2017-11-11 06:49:01Z

Component, where you would like to consume the service and display HTML

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {appService} from '../../providers/app.service';
import {GetMonthsService} from '../../providers/calendar.service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public appService : appService, public getMonthsService : GetMonthsService) {
    getMonthsService.getCurrentMonth();
  }

}

HTML to display the content from the service

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>From calendar service {{getMonthsService.currentMonth}}</h2>

</ion-content>

Service class where you want to get the data

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

@Injectable()
export class GetMonthsService {

  private currentMonth : any;

  constructor() {}


  getCurrentMonth() {
        let d = new Date();
        this.currentMonth = d.getMonth();
        return this.currentMonth;
        }

}

You can refer here for working version

Thank you very much. Great explanation and a working example. My component was poorly coded that it wasn't calling the service properly.

Collectives™ on Stack Overflow

Passing data from Angular service

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related