We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Default values for input control attributes

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"
        >

5 Replies

SP Sureshkumar P Syncfusion Team February 11, 2020 06:23 AM UTC

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 



MS Mike Schall February 11, 2020 02:43 PM UTC

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.


SP Sureshkumar P Syncfusion Team February 12, 2020 12:07 PM UTC

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.    
   
  
Let us know if you need any further assistance on this.  
   
Regards,   
Sureshkumar P   
 



MS Mike Schall February 12, 2020 10:04 PM UTC

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


SP Sureshkumar P Syncfusion Team February 13, 2020 09:40 AM UTC

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   


Loader.
Up arrow icon