'ejs-textbox' is not a known element.

[Andrew Tarr]

I have installed the @syncfusion/ej2-angular-inputs node package, per the documentation: https://ej2.syncfusion.com/angular/documentation/textbox/getting-started/. The documentation says to use the class `e-input` to render the TextBox component, but then in the "Floating label" section, it directs me to use an element component `<ejs-textbox floatLabelType="Auto"></ejs-textbox>`. This throws the error, "not a known element".

Where can I get this ejs-textbox element, or, how can I use floating label with the e-input class? The combination of the class "e-input" and "floatLabelType" does not seem to work.

[Ponmani Murugaiyan]

Hi Andrew, 

Greetings from Syncfusion support. 

We have validated your reported query. Textbox component can be rendered using the CSS class as well using the <ejs-textbox> tag.  

1. While rendered Textbox component using CSS class, if you need floating label, need to add required attribute in the html tags and the manual processing has to be made. 

Textbox render with CSS class: 

import { Component } from '@angular/core'; 

 

@Component({ 

    selector: 'app-root', 

    template: `<input class="e-input" type="text" placeholder="Enter Name" />` 

}) 

 

export class AppComponent { } 

Documentation: https://ej2.syncfusion.com/angular/documentation/textbox/getting-started/#adding-textbox-to-the-application 

Textbox render with CSS class along with floating label: 

Documentation: https://ej2.syncfusion.com/angular/documentation/textbox/how-to/add-floating-label-to-textbox-programmatically/ 

2. While rendered Textbox component using <ejs-textbox> tag, you can achieve floating label using the property floatLabelType API. 

[app.component.ts] 

 

@Component({ 

    selector: 'app-root', 

    styleUrls: ['app.component.css'], 

    template: `<ejs-textbox id="textarea" placeholder="Enter your address" floatLabelType="Auto" ></ejs-textbox>` 

}) 

export class AppComponent {} 

We have prepared stackblitz sample with <ejs-textbox> tag. Please find the sample link below for your reference. 

Documentation : https://ej2.syncfusion.com/angular/documentation/textbox/getting-started/#floating-label

 

Sample: https://stackblitz.com/edit/angular-bgalsg-qpct9t?file=app.component.ts 

Please check whether the given sample satisfies your requirement. If not please get back us, we will assists you further. 

Regards, 

Ponmani M