Use Angular class binding concept with cssClass

[Mike Schall]

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>

[Sureshkumar P]

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. 

 

API Link: https://ej2.syncfusion.com/angular/documentation/api/textbox#cssclass  

 

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 

  } 

 

 

Sample Link: https://stackblitz.com/edit/angular-n6nqfd-nwumh3?file=app.component.html  

 

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 

[Mike Schall]

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)

[Berly Christopher]

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.   

Sample Link: https://stackblitz.com/edit/angular-n6nqfd-8v2eez   

  

Let us know if you need any further assistance.  

  

Regards,   

Berly B.C   

[Mike Schall]

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;

    }

[Berly Christopher]

Hi Mike, 

Thanks for your update. Please get back to us if you need further assistance on this 

  

Regards, 

Berly B.C