![](/img/trans.png)
[英]How to change the background colour when the mat-button is clicked - Angular?
[英]Angular, how to change text in a <mat-button> when toggled
切换按钮时如何更改其内容 ?
<form class="example-form" style="text-align: center;" [formGroup]="loginForm" (ngSubmit)="buttonClicked()">
<mat-card [@myAwesomeAnimation]='state' (mouseenter)="animateMe()" (mouseleave)="animateMe()" style="padding: 2vh">
<input type="text" class="mainInput" style="font-size: 18px;" matInput autofocus shouldLabelFloat="false" placeholder="Insert Your URL Here" autocomplete="off">
</mat-card>
<br>
<button mat-raised-button color="accent"></button>
</form>
你可以有一个切换变量?
然后按如下使用
<button (click)="doToggle()">{{toggle ? 'Toggled':'Not Toggled'}}</button>
然后在TS
toggle:boolean = false;
doToggle():void{
this.toggle = !this.toggle;
// Do some other stuff needed
}
请看小提琴
我不知道切换的含义,但是如果您要更改文本,那么
toggled: boolean = false; // Declare a boolean that holds the toggle value
<!-- Use a ternary condition -->
<button mat-raised-button (click)="toggled = !toggled" color="accent">{{toggled ? 'Toggled' : 'Not toggled'}}</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.