Grid Toolbar item template doesn't worth with two way bindig neither with ejs-numerictextbox

[Marco Antonio Gallardo]

Hi.

Im having a problem for make make work ok a input type number in a grid toolbar.

the following code is working ok

this.toolbar=[{ template: '<input type="number" />' } ,'Search']

but neither 

  this.toolbar=[{ template: '<ejs-numerictextbox ></ejs-numerictextbox>' } ,'Search']

neither

   this.toolbar=[{ template: '<input type="number" [(ngModel)]=filterChoiceCount />' } ,'Search']

Both of them works ok in directly in the html, so de the imports and the variables, are correct.

and What i really would need to do is a combination of both, just like:

this.toolbar=[{template:'<ejs-numerictextbox min="1000" max="50000" [(ngModel)]="filterChoiceCount" step="500"></ejs-numerictextbox>'}, 'Search']

wich works correctly if i put directly in the html.

[Ajith Govarthan]

Hi Marco, 

Thanks for contacting Syncfusion support. 

Based on your query, you want to use both default toolbar items and Numeric textbox component in your Grid application. So, we have prepared sample in that we have rendered the NumericTextBox component using a ng-template container and bounded the ng-template reference to the toolbar template to render both NumericTextBox and default toolbar items in the Grid application.  For your convenience, we have attached the sample, please refer them for your reference. 

Code Example: 

App.component.html 

  <ng-template #template let-data> 

    <ejs-numerictextbox value="10"></ejs-numerictextbox> 

  </ng-template> 

App.component.ts 

@ViewChild('template') 

  public toolbarTemplate: any; 

  this.toolbar = [ 

      'ColumnChooser', 

      'Cancel', 

      { template: this.toolbarTemplate }, 

    ]; 

Sample-Link: https://stackblitz.com/edit/angular-ekft7w-rmqgqi?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.