Default values for input control attributes

[Mike Schall]

Is there a way to setup default or site-wide values for controls?  For example, we will always want to set floatLableType to auto and cssClass to e-outline.  

       

          formControlName="name"

          placeholder="Name"

          floatLabelType="Auto"

          cssClass="e-outline"

        >

[Sureshkumar P]

Hi Mike,

we have validated your requirement. we suspect that you want to render the textbox component with preselected floatlabeltype and cssClass property. Please find the below code example to achieve your requirement. 

 

<ejs-textbox id="textarea" #default placeholder="Enter your value" cssClass="e-outline" floatLabelType="Auto"> 

</ejs-textbox> 

 

 

We have created a sample based on your requirement. please find the sample here: https://stackblitz.com/edit/angular-tsgaxh?file=app.component.html  

 

Regards, 

Sureshkumar P 

[Mike Schall]

I know how to set the values on each ejs-textbox.  But I'm going to have thousands of textboxes in my application.  

My question is...  Is it possible to set/change the default so my developers don't have to specify the settings on each instance of a textbox.

[Sureshkumar P]

Hi Mike,   

  

Thank you for you update.  

  

Currently it is not possible to set or change the defaults of the cssClass and floatLabelType property. Hence, we suggest you the following alternatives.   

  

1.     Set the property value through a common property variable binding like below. This will be useful when changing the value later globally.  

   

[component.html]   

   

<ejs-textbox id="textarea" #default placeholder="Enter your value" [cssClass]="customClass" [floatLabelType]="LabelType"></ejs-textbox>   

   

<ejs-textbox id="textarea1" #default placeholder="Enter your value" [cssClass]="customClass" [floatLabelType]="LabelType"></ejs-textbox>   

   

<ejs-textbox id="textarea2" #default placeholder="Enter your value" [cssClass]="customClass" [floatLabelType]="LabelType"></ejs-textbox>   

   

<ejs-textbox id="textarea3" #default placeholder="Enter your value" [cssClass]="customClass" [floatLabelType]="LabelType"></ejs-textbox>   

   

<ejs-textbox id="textarea4" #default placeholder="Enter your value" [cssClass]="customClass" [floatLabelType]="LabelType"></ejs-textbox>   

   

[component.ts]   

   

public customClass: string = "e-outline";   

  public LabelType: string = "Auto";   

   

   

   

2.     Alternatively, you can get all the textbox component in the page using the “ejs-textbox” selector. Then you can set the properties by iterating through each component’s instance. Kindly refer the below code example.  

   

[component.html]   

   

<ejs-textbox placeholder="Enter your value" ></ejs-textbox>   

   

<ejs-textbox  placeholder="Enter your value" ></ejs-textbox>   

   

<ejs-textbox placeholder="Enter your value" ></ejs-textbox>   

   

<ejs-textbox  placeholder="Enter your value" ></ejs-textbox>   

   

<ejs-textbox  placeholder="Enter your value" ></ejs-textbox>   

   

[component.ts]   

   

 ngAfterViewInit() {   

    let textboxElements = document.querySelectorAll("ejs-textbox");   

    for (let i = 0; i < textboxElements.length; i++) {   

      (textboxElements[i] as any).ej2_instances[0].floatLabelType = "Auto";   

      (textboxElements[i] as any).ej2_instances[0].cssClass = "e-outline";   

    }   

  }   

   

   

We suggest you use the first solution to avoid loops for better performance.    

   

Sample link: https://stackblitz.com/edit/angular-tsgaxh-hkeilu?file=app.component.html    

  

Let us know if you need any further assistance on this.  

   

Regards,   

Sureshkumar P   

 

[Mike Schall]

Thanks for the response.  Is this something that could be added to your feature request list?

[Sureshkumar P]

Hi Mike,   

   

Thanks for your update.   

   

We would like to inform you that, we have maintained only a single component’s instance each time. So, we could not bind the property globally using a single instance. Hence, it is not possible to achieve through feature. In your scenario, we suggest you use our previous workaround solutions to achieve your requirement.    

   

Regards,   

Sureshkumar P