Object inside function not getting executed when calling function from another component - html

Question

Apologies for not being able to title my question properly.
Let me explain my issue properly.
I have 2 Components say A and B.
In B I have a function saveIndCustData which emits and saves data.
export class CustomerformComponent implements OnInit {
#Output()
savedIndCustomer: EventEmitter<any> = new EventEmitter<any>();
saveIndCustData() {
const savedIndCustomer = {
prefix: this.prefix,
nameType: this.indCustNameType,
firstName: this.firstName,
middleNAme: this.middleName,
lastName: this.lastName,
gender: this.gender,
dateOfBirth: this.parseDate(this.dateOfBirth.toString()),
citizenship: this.citizenship
};
this.savedIndCustomer.emit(savedIndCustomer);
this.snackbar.open('Customer Info Saved,Click on Next', 'Close', {
duration: 5000
});
}
}
I am now calling the function from component A.
import { CustomerformComponent } from './forms/customerform/customerform.component';
constructor(private custComp: CustomerformComponent) {}
saveCustomerForm(): void {
this.custComp.saveIndCustData();
}
I emit the data into a service class
#Output()
savedIndCustomer: EventEmitter<any> = new EventEmitter<any>();
Service Class
public addDynamiIndCustomerComponent() {
const factory = this.factoryResolver.resolveComponentFactory(CustomerformComponent);
const component = factory.create(this.rootViewContainer.parentInjector);
component.instance.savedIndCustomer.subscribe(data => {
console.log(data);
// Insert Individual Customer Type
this.custFullDetails.customerType = 'individual';
this.custFullDetails.individualCustomer.dateOfBirth = data.dateOfBirth;
this.custFullDetails.individualCustomer.citizenship = data.citizenship;
this.custFullDetails.individualCustomer.gender = data.gender;
this.custFullDetails.individualCustomer.individualName.push({
prefix: data.prefix,
firstName: data.firstName,
middleName: data.middleName,
lastName: data.lastName,
agreementId: data.agreementId,
nameType: data.nameType
});
console.log(this.custFullDetails.individualCustomer);
});
this.rootViewContainer.insert(component.hostView);
}
My issue is if I invoke the saveIndCustData function from component B it pushes data into array const savedIndCustomer{ ... } and calls the service class.
However when I invoke the same function from component A it doesn't invoke the const savedIndCustomer{ ... } method inside saveIndCustData() function and service class method does not save data in array but it simply shows the snakbar.
What is the issue?

Answer 1

Suppose you put the component B inside the html of component A, so you should make a reference for the component B like this
A.component.html:
...
<B #bcmp></B>
...
and inject it in A.component.ts using #ViewChild like this
A.component.ts:
#Component({
selector: 'A',
templateUrl: './A.component.html',
styleUrls: ['./A.component.scss']
})
export class AComponent implements OnInit {
#ViewChild("bcmp") bcmp : B
ngOnInit(): void {
// by this way you can use any method existant in B component
this.bcmp.saveIndCustData();
}
}