After adding new functions to a service in my project, I encountered an error when trying to call a service function from my component template. The error message displayed was "Cannot read property 'isCompanyEligible' of undefined."
I attempted to create a new function within my component and assign the service function to it, but unfortunately, I faced the same error.
Below is the code for my service:
import { FinancialHealth } from 'src/app/shared/models/financial-health';
import { LocalStoreService } from 'src/app/shared/services/local-store.service';
import {Application} from './../models/application';
import {Injectable} from '@angular/core';
import { NgbDateParserFormatterService} from './ngb-date-parser-formatter.service ';
@Injectable({
providedIn: 'root'
})
export class EligibilityService {
application: Application;
activityAreas = [];
areasEligibility = [];
legalForms = [];
jobPositions = [];
constructor(
private ls: LocalStoreService,
private dateService: NgbDateParserFormatterService
) {
this.application = this.ls.getItem('application');
const {
activity_areas,
legal_forms,
job_positions,
areas_eligiblity
} =
this.ls.getItem('shared_data').data;
this.activityAreas = activity_areas;
this.legalForms = legal_forms;
this.jobPositions = job_positions.filter(job => job.is_management_position ==
1);
this.areasEligibility = areas_eligiblity;
}
public isCompanyEligible(application ? ) {
if (application) {
this.application = application;
}
if (!this.application || (!this.application.company)) {
return null;
}
const company = this.application.company;
let age;
if (typeof this.application.company.established_at == 'object') {
const date =
this.dateService.format(this.application.company.established_at);
age = this.getAge(date);
} else {
age = this.getAge(company.established_at)
}
return this.legalForms.includes(company.legal_form) && (age >= 2 && age <=
5);
}
growthRate(firstYear, secondYear) {
if (!firstYear || !secondYear) {
return 0;
}
return Math.round(((secondYear - firstYear) / firstYear) * 100);
}
}
This is my component.ts:
import { Component, OnInit } from '@angular/core';
import { CustomValidators } from 'ng2-validation';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { DataLayerService } from 'src/app/shared/services/data-layer.service';
import { BreadcrumbService } from '../../../shared/services/breadcrumb.service';
import { EligibilityService } from 'src/app/shared/services/eligibility.service';
@Component({
selector: 'app-form-sommaire',
templateUrl: './sommaire.component.html',
styleUrls: ['./sommaire.component.scss']
})
export class SommaireFormComponent implements OnInit {
formBasic: FormGroup;
loading: boolean;
radioGroup: FormGroup;
sharedData: any;
isValid: Boolean = false;
application: any;
breadcrumb: { label: string; route: string; }[];
title: String = 'Sommaire';
constructor(
private fb: FormBuilder,
private toastr: ToastrService,
private ls: LocalStoreService,
private appService: ApplicationService,
private data: BreadcrumbService,
public eligibility: EligibilityService
) { }
}
This is my HTML template:
<div class="col-lg-2">
<i *ngIf="eligibility.isCompanyEligible()" class="icon ion-ios-checkmark-circle large-success"></i>
<i *ngIf="eligibility.isCompanyEligible() === false" class="icon ion-ios-close-circle large-danger"></i>
<i *ngIf="eligibility.isCompanyEligible() == null" class="icon ion-md-alert large-warning"></i>
</div>