Ionic 3 - Sending data to service from component - ionic-framework

Question

I am trying to send an object from my component which is from the input of the user to the service I have.
This is my code..
Sample.html
<ion-item>
<ion-label color="primary">Subject</ion-label>
<ion-select [(ngModel)]="attendanceSet.subject">
<ion-option *ngFor="let subject of subjects" [value]="subject.title">{{subject.title}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label color="primary">Date</ion-label>
<ion-datetime [(ngModel)]="attendanceSet.date" displayFormat="DDD MMM DD" pickerFormat="YYYY MM DD"></ion-datetime>
</ion-item>
<button ion-button block padding (click)="proceed(attendanceSet)">Proceed</button>
Sample.ts
public attendanceSet = {}
proceed(attendanceSet) {
this.navCtrl.push(CheckAttendancePage, {
setData: attendanceSet
});
}
Service
private attendanceListRef: AngularFireList<Attendance>
public setAttendance = {}
constructor(private db: AngularFireDatabase, private events: Events, public navParams: NavParams, private method: CheckAttendancePage){
this.attendanceListRef = this.db.list<Attendance>('attendance/')
}
addAttendance(attendance: Attendance) {
return this.attendanceListRef.push(attendance)
}
What I'm trying to do is getting data from the sample.html which I will later use to define the path of the "attendanceListRef" like this "attendance/subject/date"
Is there any proper or alternative way to do this? Thanks!

Answer 1

It's quite simple to send data to a Service with Angular. I'll give you three options in this example.
service.ts
import { Injectable } from '#angular/core';
import { Events } from 'ionic-angular';
#Injectable()
export class MyService {
// option 1: Using the variable directly
public attendanceSet: any;
// option 3: Using Ionic's Events
constructor(events: Events) {
this.events.subscribe('set:changed', set => {
this.attendanceSet = set;
});
}
// option 2: Using a setter
setAttendanceSet(set: any) {
this.attendanceSet = set;
}
}
In your Component you can do the following.
import { Component } from '#angular/core';
import { Events } from 'ionic-angular';
// import your service
import { MyService } from '../../services/my-service.ts';
#Component({
selector: 'something',
templateUrl: 'something.html',
providers: [MyService] // ADD HERE -> Also add in App.module.ts
})
export class Component {
newAttendanceSet = {some Object};
// Inject the service in your component
constructor(private myService: MyService) { }
proceed() {
// option 1
this.myService.attendanceSet = this.newAttendanceSet;
// option 2
this.myService.setAttendanceSet(this.newAttendanceSet);
// option 3
this.events.publish('set:changed', this.newAttendanceSet);
}
}
Basically I'd recommend option 1 or 2. 3 is considered bad practice in my eyes but it still works and sometimes allows for great flexibility if you need to update your value over multiple services/components.

Answer 2

I tried to save the attendanceSet on an event then add listener on the service but is not successful. It seems like events do not work on services? Cause when I added the listener to a different component is worked but not on the service.