Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

222
Visualizações
How to apply colour for mat-icon in angular by using the condition

form field image->I need to add colour to check_circle mat-icon in angular and that icon is in the login form field

->After the user enters his email then it (check_circle) icon should change to green colour if he doesn't enter his email it should be in grey colour.

`[ngStyle]="changeColour()" And 

This is Ts file code 
[This is the screenshot of my form field][1]
changeColur(){
     if(this.loginForm.get('userName').value == 'admin@mcrb.com')
{
 return 'green'
    }
 else {
   return 'grey'
 }
} 

`

->Here loginForm is the name of my form group, and userName is the name of my form-control name of that particular field and 'admin@mcrb.com' is the email that the user need to enter if he enters that email only the icon colour should change to green

->And changeColour() I have added this in my ngonInIt() also but it is not working anyone help me

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

   

    public changedColor: string;
   public loginForm: FormGroup;

   constructor(private fb: FormBuilder) {}

   ngOnInit() {
    this.buildloginForm();
    this.loginForm.get('userName').valueChanges.subscribe((res) => 
    {
      console.log(res);
      if (res === 'admin') {
        this.changedColor = 'green';
      } else {
        this.changedColor = 'blue';
      }
    });
    }

    private buildloginForm() {
    this.loginForm = this.fb.group({
      userName: [''],
    });
    }
<form [formGroup]="loginForm">
<input type="text" formControlName="userName" class="primary- 
input mr-2" />
</form>

<p [ngStyle]="{ color: changedColor }">
 Start editing to see some magic happen :)
</p>

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda