Angular - Pass input to ng-content component

Question

I have a modal component with ng-content. In this ng-content I can pass other components with injector. I need to pass anyway an object inside it for editing data. But I need some help. This is the modal component html:

<div class="modal">
  <div class="modal-body">
     this is my Object: {{model | json}}
    <ng-content></ng-content>
  </div>

  <div class="modal-footer">
    <button (click)="sendMessage()">success</button>
    <button>abort</button>
  </div>
</div>

The components inside ng-content may vary. In my example I have an input. I need to pass a model inside that components.

I use a service with injector to pass the content into my modalComponent, and in the function "open" I defined a parameter obj that's the object that I need to see into ng-content component. (The parameter is stored inside "model" input on my Modal component).

@Injectable()
export class ModalService {
  dialogComponentRef: ComponentRef<ModalComponent>;
  private subject = new Subject<any>();

  open(content: any, obj: any) {
    const contentComponentFactory = this.cfResolver.resolveComponentFactory(content);
    const modalComponentFactory = this.cfResolver.resolveComponentFactory(ModalComponent);

    const contentComponent = contentComponentFactory.create(this.injector);
    const modalComponent = modalComponentFactory.create(this.injector, [[contentComponent.location.nativeElement]]);

    modalComponent.instance.model = obj;

    this.dialogComponentRef = modalComponent;

    document.body.appendChild(modalComponent.location.nativeElement);

    this.appRef.attachView(contentComponent.hostView);
    this.appRef.attachView(modalComponent.hostView);
  }
}

This is my modalComponent Class:

export class ModalComponent {
  @Input() model: any;

  sendMessage() {
    this.modalService.sendMessage();
  }

  constructor(private modalService: ModalService) {}

}

Therefore I defined a component with this html:

<input type="text" value="name" placeholder="name">

Inside this input I desire to see the object for editing this value.

I can't find a solution for having the object inside the content-component....I need it because I would have a form where I must edit some values.

This is my stackblitz example: Example

So you want to pass the form component and some prefilled values(the data to be passed in the form?) — nobalG
Yes. A component that has a form and eventually an object to be passed in the form. — Andy88

nobalG nobalG · Accepted Answer · 2021-01-17T10:26:44

What you can do is assign the formData to a property of a service and then read that property in the content component's ngOnInit(), I tried below code and its working for me.

 @Injectable()
    export class ModalService {
      dialogComponentRef: ComponentRef<ModalComponent>;
      formData:any;
      private subject = new Subject<any>();
    
      open(content: any, obj: any) {
       this.formData = obj;
        const contentComponentFactory = this.cfResolver.resolveComponentFactory(content);
        const modalComponentFactory = this.cfResolver.resolveComponentFactory(ModalComponent);
    
        const contentComponent = contentComponentFactory.create(this.injector);
        const modalComponent = modalComponentFactory.create(this.injector, [[contentComponent.location.nativeElement]]);
    
        modalComponent.instance.model = obj;
    
        this.dialogComponentRef = modalComponent;
    
        document.body.appendChild(modalComponent.location.nativeElement);
    
        this.appRef.attachView(contentComponent.hostView);
        this.appRef.attachView(modalComponent.hostView);
      }
    }

and in ngOnInit() of content-component,

ngOnInit() {
   this.name = this.modalService.formData.name;
}

However you can try to wrap this property in some function inside service, rather than accessing the property directly(getFormData() or something)

Angular - Pass input to ng-content component

1 Answers