Add Button to textboxComponent wont work. Function AddIcon undefined

[Matthias Wagner]

Hi.

I wanted to add a button to my textbox component just as in your example from https://ej2.syncfusion.com/angular/documentation/textbox/style-appearance/

If i try to do this i got an error with the function addIcon. Can you please help me what i am doing wrong. 

See my example on Stackblitz. https://stackblitz.com/edit/angular-r6gsy9?file=src/app/app.component.ts

Regards 

[UdhayaKumar Duraisamy]

You can refer to the below Syncfusion forum regarding “How to add icons to the TextBox component using addIcon method".

• https://www.syncfusion.com/forums/155371/with-search-icon

• https://www.syncfusion.com/forums/175998/place-icon-inside-of-outlined-textbox

Sample : https://stackblitz.com/edit/angular-vfl9tr?file=app.component.html,app.component.ts

[Reference]

[Matthias Wagner]

Hi, thanks for your fast answer.

I copied this example from your website, but i always get the error that 

"property addIcon does not exist on type TextBoxComponent"

Do i miss some references? See my example on Stackblitz https://stackblitz.com/edit/angular-ivy-huyumt?file=src/app/app.component.ts

[Vinothkumar Yuvaraj]

Hi Matthias Wagner,

We suggest using type any for textboxobj to solve your problem. Please find the below code and sample for your reference.

App.component.ts

export class AppComponent {

  public onCreate(args: any): void {

    (this.textboxObj as any).addIcon('append', 'e-icons e-search');

  }

}

Sample : https://stackblitz.com/edit/angular-ivy-hh9yev?file=src%2Fapp%2Fapp.component.ts

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Matthias Wagner]

Hello,

i just noticed, that the addicon function is not the problem.

In my program the ejs-textbox is inside a ng-template block. When i want to add the buttons with the addIcon-Function the ViewChild is always undefined at this moment.

Is there a way to add icons to a ejs-textbox if it is inside a ng-template block?

Regards

[UdhayaKumar Duraisamy]

If you use ejs-textbox within a ng-template, you must set ngIf to true to render the component. For more information, please see the shared public blog and code snippet below.

<ng-template ngIf="true">

  <ejs-textbox

    id="textbox"

    #default

    placeholder="Enter your name"

    floatLabelType="Auto"

    (created)="onCreate($event)"

  >

  </ejs-textbox>

</ng-template>

Public blog : https://angular.io/api/core/ng-template#description