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

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?

Your code structure is not standard. You cannot inject a component in another component. Also, you are trying to access the component directly in the service, which is not a good approach. — Eiman
– Eiman, Commented May 13, 2019 at 20:40

Mohamed Kallel · Accepted Answer · 2019-05-13 23:07:36Z

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();
    }
}

answered May 13, 2019 at 23:07

Mohamed Kallel

1523 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cpt.Kitkat Over a year ago

I am not referencing html of Comp B in comp A. I just want to invoke the function from component A.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related