Y at-il une possibilité de changer la couleur du bouton?

Question

Je veux que la couleur du bouton change lorsque l'utilisateur a écrit son nom d'utilisateur et pw dans l'entrée, de sorte qu'un signe du bouton peut être pressé savoir. (Si changement de gris -> vert)

CSS

.turn-green { 
    background-color: green; 
} 

TS

@IonicPage() 
@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html', 
}) 
export class LoginPage { 
    userWroteName: false; 

    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    function userTyped(value) { // fires on each keystroke 
    const minLengthForName = 3; // you choose your min accepted length 
    // some code you want here 
    if (value.length >= minLengthForName) { 
     this.userWroteName = true; 
    } else { 
     this.userWroteName = false; 
    } 
} 


    } 



    ionViewDidLoad() { 
    console.log('ionViewDidLoad LoginPage'); 
    } 


} 

Answer 1

Dans votre fichier *.html sur l'utilisation de votre élément <button>[ngClass]

<button [ngClass]="{'turn-green': userWroteName}">My Button</button> 

Dans votre fichier *.css définir le turn-green classe

.turn-green { 
    background-color: green; 
} 

Dans votre fichier *.ts créer la variable booléenne userWroteName et ont une fonction que les incendies selon que l'utilisateur a écrit quelque chose dans la zone de texte ou non.

userWroteName: false; 

function userTyped(value) { // fires on each keystroke 
    const minLengthForName = 3; // you choose your min accepted length 
    // some code you want here 
    if (value.length >= minLengthForName) { 
     this.userWroteName = true; 
    } else { 
     this.userWroteName = false; 
    } 
} 

Ce code suppose que vous écoutez chaque combinaison de touches, et appelant userTyped() sur chaque combinaison de touches tapées.