Is there a way to utilize a class that is defined in a service within a component? The Service.ts file includes a class that I would like to use in my component. Despite injecting the service into the component, I am encountering difficulties in accessing the class.
**Below is a snippet from my service.ts file
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
class Registration{
constructor(
public id: number = null,
public name: string = '',
public age:number=null,
public dept: string = 'Select Your Department',
public empType: string = 'Select Employee Type',
public hra: string = '',
public medical:string='',
) {}
}
export class DataService {
registrations: Registration[] = [];
myModal: Registration;
showNew: Boolean = false;
submitType: string = 'Save';
selectedRow: number;
empType: string[] = ['Permanent','Trainee'];
constructor() { }
}
//Now, I want to use the Registration Class in my Component File.
import { Component, OnInit, ViewChild } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
@ViewChild('myModal') myModal: any;
// It holds a list of Registrations
registrations: Registration[] = [];
// It holds registration Model
regModel: Registration;
// It signifies whether the operation is 'Save' or 'Update'.
submitType: string = 'Save';
// It keeps track of the table row index based on selection.
selectedRow: number;
// It maintains an Array of Employee Types.
employeeType: string[] = ['Permanent', 'Trainee'];
//It maintains the department Types
department: string[] = ['PES', 'AP1', 'AP2', 'CSD', 'QSD', 'ADMIN'];
constructor(private data: DataService) {
// Add default registration data.
//this.registrations.push(new Registration('Johan', 28, 'PES', 'Permanent', '5', '10'));
}
ngOnInit() { }
// The following method is linked to the New Button.
onNew() {
// Initialize a new registration.
this.regModel = new Registration();
// Change submitType to 'Save'.
this.submitType = 'Save';
// display the registration entry section.
// this.showNew = true;
}
// The following method is linked to the Save Button.
onSave() {
if (this.submitType === 'Save') {
// Push registration model object into registration list.
(() => {
confirm("Press OK , If You Want To Save !");
console.log('Data Saved');
this.myModal.nativeElement.click();
})();
this.registrations.push(this.regModel);
} else {
// Update the existing properties values based on model.
this.registrations[this.selectedRow].name = this.regModel.name;
this.registrations[this.selectedRow].age = this.regModel.age;
this.registrations[this.selectedRow].dept = this.regModel.dept;
this.registrations[this.selectedRow].empType = this.regModel.empType;
this.registrations[this.selectedRow].hra = this.regModel.hra;
this.registrations[this.selectedRow].medical = this.regModel.medical;
if(this.myModal)
this.myModal.nativeElement.click();
}
// Hide the registration entry section.
//this.showNew = false;
}
// The following method is linked to the Edit Button.
onEdit(index: number) {
// Assign the selected table row index.
this.selectedRow = index;
// Initialize a new registration.
this.regModel = new Registration();
// Retrieve the selected registration from the list and assign it to the model.
this.regModel = Object.assign({}, this.registrations[this.selectedRow]);
// Change submitType to Update.
this.submitType = 'Update';
//this.showNew = true;
}
}**