单击Angular中的按钮时如何更改文本区域的边框颜色？

【问题标题】：How to change the border color of a text-area when clicking on a button in Angular?单击Angular中的按钮时如何更改文本区域的边框颜色？
【发布时间】：2022-01-14 01:27:16
【问题描述】：

我有这个带有按钮的文本区域，我希望在单击按钮时改变边框颜色，我该如何实现？

【问题讨论】：

看看 NgClass \ NgStyle - 这可能就是你要找的东西

标签： css angular

【解决方案1】：

正如 gil 提到的，您可能正在寻找 NgClass（因为您在标签中特别提到了 css）。您也可以使用attribute binding 执行此操作。下面是一个示例，说明您可以如何做：

// In your component
emphasize = false;
toggleEmphasize() {
  this.emphasize = !this.emphasize;
}

/* In your styles */
.emphasize {
  border: solid 1px red;
}

<!-- And finally your template -->
<button (click)="toggleEmphasize()">Click Me</button>
<!-- Using ngClass -->
<textarea [ngClass]="{ emphasize: emphasize }"></textarea>
<!-- Using attribute binding -->
<textarea [class.emphasize]="emphasize"></textarea>

这是一个stackblitz，它提供了一个工作示例。

【讨论】：