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

Use Angular class binding concept with cssClass

I assume this is a feature request, but thought I would try here first...

Is it possible to use Angular's class binding concept with the cssClass attribute?

I want to dynamically add the "e-error" class to the wrapper.  It would be great if the cssClass attribute worked similar to Angular's class binding

        <ejs-textbox
          formControlName="name"
          placeholder="Name"
          floatLabelType="Auto"
          cssClass="e-outline"
          [cssClass.e-error]="controls.name.invalid"
          [attr.readonly]="entity != null"
        ></ejs-textbox>

5 Replies

SP Sureshkumar P Syncfusion Team February 11, 2020 09:34 AM UTC

Hi Mike, 
 
Greetings from Syncfusion support. 
 
We would like to inform you that, cssClass is a property that is used to add or remove the class for CSS customization for the EJ2 TextBox component. Please refer the below API link. 
 
 
We suspect that you want to add the error style in the input element text. So we suggest you can directly process via class property and add the required CSS style by traverse the textbox class as mentioned below. 
 
.e-error.e-control.e-textbox{ 
    color#f44336 
  } 
 
 
 
If we misunderstood your requirement. please revert us your requirement with detailed description. That will help us to provide exact solution at earlier. 
 
Regards, 
Sureshkumar P 



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

Thanks for your response.  My goal is to change the outline and label/placeholder red, not the text in the box red.  In the most common case "required" there is no text in the box to make red so it looks the same.  For that I need to set e-error on the wrapper of Textbox (cssClass)




BC Berly Christopher Syncfusion Team February 12, 2020 12:30 PM UTC

Hi Mike,    
Thank you for your update.   
We can achieve your requirement by overriding the CSS styles of the placeholder and input border color of the TextBox component. Kindly refer to the below code example.    
[app.component.html]   
<ejs-textbox #name name="name" formControlName="display" placeholder='Enter your name'floatLabelType="Always"   
             [class.e-error]="getClass(display)">   
</ejs-textbox>   
   
[app.component.ts]   
public getClass(valid) {   
        if (valid.valid) {   
            return false;   
        } else {   
            return true;   
        }   
    }   
   
[app.component.css]   
<style>   
    /* To change the textbox input color to e-error class */   
    .e-textbox.e-error .e-float-input.e-control-wrapper,   
    .e-textbox.e-error .e-float-input.e-control-wrapper input,.e-textbox.e-error .e-float-input.e-control-wrapper:hover{   
    border-color:#a94442 !important;   
    }   
   
    /* To change the textbox float label text color to e-error class */   
    .e-textbox.e-error .e-float-input.e-control-wrapper  label.e-float-text {   
    color: #a94442 !important;   
    }   
</style>   
   
Please find the modified sample from the below link.   
  
Let us know if you need any further assistance.  
  
Regards,   
Berly B.C   



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

I tried your css, but it has a line through the floating label.  Here is my final css.  Thanks for your help!

    .e-error.e-textbox .e-outline.e-float-input.e-control-wrapper,
    .e-error.e-textbox .e-outline.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before,
    .e-error.e-textbox .e-outline.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after,
    .e-error.e-textbox .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before,
    .e-error.e-textbox .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after,
    .e-error.e-textbox .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before,
    .e-error.e-textbox .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after {
      border-color: #f44336;
    }

    .e-error.e-textbox .e-float-input.e-control-wrapper label.e-float-text {
      color: #d64113 !important;
    }


BC Berly Christopher Syncfusion Team February 13, 2020 05:53 AM UTC

Hi Mike, 

Thanks for your update. Please get back to us if you need further assistance on this 
  
Regards, 
Berly B.C 


Loader.
Live Chat Icon For mobile
Up arrow icon