Inputs was not working by dynamic component

Question

I implemented with ndc-dynamic for creating dynamic component.

It works very well with outputs, but inputs was not working.

I will show my code.

 <ng-container *ngComponentOutlet="item.widgetComponent; ndcDynamicInputs: inputs; ndcDynamicOutputs: outputs">

in the ts file

 aButtonDisabled: boolean;
  bButtonDisabled: boolean;
  inputs = {
    disabledAView: this.aButtonDisabled,
    disabledBView: this.bButtonDisabled
  };

this two codes are in parent component.

the child component:

 @Input() disabledVehicleAView: boolean;
  @Input() disabledVehicleBView: boolean:

and in the HTML

  <mat-grid-tile>
        <button [disabled]="disabledVehicleBView">
       </button>
      </mat-grid-tile>
      <mat-grid-tile>
        <button  [disabled]="disabledVehicleAView">
          </button>
      </mat-grid-tile>

Did I do something wrong?

any solutions?

Best Regards,

Leo

Answer 1

You need to reassign the value of inputs whenever the value of this.aButtonDisabled or this.bButtonDisabled is changing.

Your main static component - HTML

<input type="checkbox" class="example-margin" [(ngModel)]="aButtonDisabled" (ngModelChange)="onAButtonChange($event)"/>aButtonDisabled 
<input type="checkbox" class="example-margin" [(ngModel)]="bButtonDisabled" (ngModelChange)="onBButtonChange($event)"/>bButtonDisabled

<ng-container 
               *ngComponentOutlet="component; 
               ndcDynamicInputs: inputs; 
               ndcDynamicOutputs: outputs"></ng-container>

Your main static component - TS

onAButtonChange() {
    console.log(this.aButtonDisabled)
    this.inputs = {
      ...this.inputs,
      ...{ disabledVehicleAView: this.aButtonDisabled }
    }
  }

  onBButtonChange() {
    console.log(this.bButtonDisabled)
    this.inputs = {
      ...this.inputs,
      ...{ disabledVehicleBView: this.bButtonDisabled }
    }
  }

onAButtonChange or onAButtonChange methods can be called when User change the value from a control, for example a checkbox's onChange event. In your case it may not be a checkbox, but some how you may be chaning the value of this.aButtonDisabled that time call the onAButtonChange() method also

Working Demo