Applying styling to component element


#1

Hi there,

was hoping for a little in assistance in terms of the styling implementation.

in a login page, for example…I have a background error color to display based on the validity of the input field.

the component selector is page-login

and in login.scss I have a style as follow

page-login {   
.has-error{
    background-color :solid 1px $error-color;
}

}

however in the html file the style is not pulling through

 <ion-item [ngClass]="{'page-login.has-error': loginForm.controls.email.touched && loginForm.controls.email.errors}">

I also tried without referencing page-login

<ion-item [ngClass]="{'has-error': loginForm.controls.email.touched && loginForm.controls.email.errors}">

Even if I add the class directly class='has-error' it is not pulling through.

How would I do this correctly?

Regards


#2

Did you ever find a fix for this?