Passing button text at runtime while adding component at runtime using NgComponentOutlet

[Viren]

Hi,

I am trying to add KendoButton at runtime using NgComponentOutlet. The button rendered successfully but I am not able to set the inner text for it. Any idea how to do that? Here is the code.

Component.html

<ng-container *ngComponentOutlet="currentButton.component; inputs: currentButton.inputs;">  

</ng-container>

 

Component.ts

  get currentButton(){

    return {

      component: ButtonComponent ,

      inputs: { size: 'large', fillMode: 'solid', themeColor: 'primary', innerText: 'Click Me' },

      module: ButtonsModule

    }

  }

The above code sets the other inputs properly and it is reflected in the UI component [e.g. themeColor], but not the innerText. Here is the screenshot.

Is there any way to achieve this?

Thank you in advance.

[Martin Bechev]

Hi Viren,

Thank you for the provided code snippets.

The ButtonComponent doesn't expose an innerText property. All properties that the developer can set are listed here:

https://www.telerik.com/kendo-angular-ui/components/buttons/api/ButtonComponent/

To set the button text, the developer needs to provide it in the template:

<button kendoButton (click)="onButtonClick()">Browse</button>

In these lines of words, a custom component might need to be created that wraps the Kendo Button component. In this way, the Button properties can be set dynamically along with the text which must be interpolated:

button-wrapper.component.ts

@Component({
  selector: 'my-button',
  template: `
      <button kendoButton [size]="size" [fillMode]="fillMode" [themeColor]="themeColor">{{innerText}}</button>
  `,
})
export class MyButtonComponent {
  @Input() innerText!: string;
  @Input() size!: ButtonSize;
  @Input() fillMode!: ButtonFillMode;
  @Input() themeColor!: ButtonThemeColor;
}

 

app.component.ts

@Component({
  selector: 'app-root',
  template: `
    <ng-container *ngComponentOutlet="currentButton.component; inputs: currentButton.inputs;"></ng-container>
   `,
})
export class AppComponent {
  get currentButton(){
    return {
      component: MyButtonComponent ,
      inputs: { size: 'large', fillMode: 'solid', themeColor: 'primary',  innerText: 'Click Me' },
    }
  }
}

I hope this sheds some light on this case. Let me know if I can provide any further assistance.

Regards,
Martin
Progress Telerik