应用按钮的默认样式和onClick更改样式-Angular 4 [英] Apply default style and onClick change style of a button -Angular 4

问题描述

我有一个按钮，我想应用按钮的默认样式，当用户单击按钮时，将按钮样式的颜色更改为红色，将背景样式的更改为白色.打击是我的.css和组件.

I have one button, i want to apply a default style of a button and when user click on a button change a button style color to red and background-color to white. Blow is my .css and component.

.btn-default {
  color: white;
  background-color: blue;

}

.btn-change {
  color: Red;
  background-color: white;
}

Component.ts

Component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  bntStyle: string;
  AppComponent() {

   this. bntStyle = 'btn-default';
  }
  submit() {
    this.bntStyle = 'btn-change';

  }

.html

<div>
 <button name="Save" [ngClass]="['bntStyle']" (onClick)="submit()">Submit</button>
</div>

推荐答案

您正在绑定字符串'btnStyle'.相反，您应该绑定以下文件:

You are binding the string 'btnStyle'. Instead, you should bind the filed:

<div>
    <button name="Save" [ngClass]="[bntStyle]" (click)="submit()">Submit</button>
</div>

这篇关于应用按钮的默认样式和onClick更改样式-Angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！