Assigning a value to a component property

[abbaty48]

Hi!!
i use a component in the create method in a code, but i need to pass a value to a property of the component

[khylias]

Hi @abbaty48,
you need to set the property of your component before injecting it into the modal.

[abbaty48]

please how, because i try to create an instance of the component and then pass it to the create method, which is an error

[abbaty48]

i have a component called AddCartComponet, which has a property cartBook in which has a value of undefined. so i use the create method of ngxSmartModalService dependency injection and use the AddCartComponent as the content, this works perfect but the cartBook property is alway undefined, so i need to pass a value to the cardBook property of the AddCartComponent. i hope you can help with this.

[maximelafarie]

Hi @abbaty48, please provide us a piece of code showing your issue or give us a real example on stackblitz.

[alc-1]

Hi, I'm having the same issue on my side. I need to modify properties on a component before displaying it.. and it's not template driven.
It's created thanks to NgxSmartModalService.create function.

Exemple:

Consider a dumb component ModalComponent, that requires some data which can't be injected before, since it'll be created by NgxSmartModalService.

@Component({
  selector: 'app-modal-component',
  template: '<p>{{ value }}</p>',
})
export class ModalComponent implements OnInit {
  public static readonly modalIdentifier = 'SMART_CONFIRMATION_MODAL';

  @Input() value = 'body';

  constructor(private modalService: NgxSmartModalService) {}

  ngOnInit() {
    this.loadDataOnModalOpen();
  }

  private loadDataOnModalOpen() {
    this.modalService.getModal(ModalComponent.modalIdentifier).onOpen.subscribe((modal: NgxSmartModalComponent) => {
      console.log('Expecting some data to be retrieved here', modal.getData());
      this.value = modal.getData().value;
    });
  }
}

Now when I need that modal, I'll have a function that looks like that

@Injectable({ providedIn: 'root' })
export class GenericModalService {
  constructor(private modalService: NgxSmartModalService) {}

  public openModal(dataToInsert: string) {
    const modal = this.modalService.create(ModalComponent.modalIdentifier, ModalComponent);
    // Attempt n°1 : setData
    modal.setData({ value: dataToInsert });
    // Attempt n°2 : modify property directly
    const component = modal.contentComponent as unknown as ModalComponent;
    component.value= dataToInsert;
    // Opening
    modal.open();
  }
}

Observations

1. (Attempt n°1) Events are not emitted, subscribing to onOpen, onOpenFinished, onDismiss or anything else doesn't do anything. It feels like a modal created with the create function doesn't emit anything.
2. (Attempt n°2) Not sure about that, but even if contentComponent seems to contain ModalComponent, settings properties won't do a thing.

Basically, I need a way to create a modal and modify the component properties. What do you suggest?

[alc-1]

Conclusion : Attempt n°1 works.

A component will have the OnInit triggered whenever the modal.open() is called.
So, replacing loadDataOnModalOpen with the example behind can be enough :

private loadDataOnModalOpen() {
    const modalData = this.modalService.getModal(ModalComponent.modalIdentifier).getData());
    this.value = modalData.value;
}

This doesn't feel right since it obliges to have a coupling between the component displayed and the modalService... but it'll do for the time being.