[英]Change conditionally CSS of angular component
I would change the style of p-autocomplete component depending on variable value 我会根据变量值更改p-autocomplete组件的样式
I have a toggle input that determine whether my variable is true or false 我有一个切换输入,确定我的变量是true还是false
<div class="switch-inner">
<p [ngClass]="{'businessG': !toggle }" class ="toggle-inline ">Business group</p>
<div class="toggle-btn toggle-inline">
<label class="switch">
<input type="checkbox" [(ngModel)]="toggle">
<span class="slider round"></span>
</label>
</div>
<p [ngClass]="{'borrower': toggle }" class="toggle-inline">Borrower</p>
</div>
Then I use this value to set the style of my suggestion items background on hover. 然后,使用此值在悬停时设置建议项背景的样式。
actually I'm using a default color that I have changed by using ::ngdeep 实际上,我使用的默认颜色是通过:: ngdeep更改的
::ng-deep .ui-autocomplete-list-item:hover{
background-color: #24B3C7; // would change this to another color
font-family: 'BNPPSans';
border-radius: 0
}
I would change the background color depending on the value of the toggle variable. 我将根据切换变量的值更改背景色。
Here's my component html 这是我的组件html
<div class="container" id ="inputSearchPage">
<div class="search-input col-md-6 col-sm-6 ui-fluid" >
<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"
emptyMessage={{noBorrowerResult}}
[minLength]="3"
[size] = "40"
field = "name"
>
<ng-template let-elm pTemplate="item" class="suggestion-item" >
<div >{{elm.name}} ( ID: {{elm.code}} )</div>
<div class="add-button">+</div>
</ng-template>
</p-autoComplete>
</div>
How can I set the background color depending to the toggle value ? 如何根据切换值设置背景色? ( if true set
::ng-deep .ui-autocomplete-list-item:hover
backgroud-color to color 1 else set to color 2 ) (如果设置为true,则将
::ng-deep .ui-autocomplete-list-item:hover
backgroud-color设置为color 1,否则设置为color 2)
You can use ngStyle, but there is currently no support for hover, so you'll have to workaround it using mouseenter and mouseleave. 您可以使用ngStyle,但目前不支持悬停,因此您必须使用mouseenter和mouseleave解决该问题。
So in your html you can add 因此,您可以在html中添加
[ngStyle]="(hover && toggle) ? { 'background-color': 'someColor' } : { 'background-color':
'anotherColor' }" (mouseover)="hover=true" (mouseleave)="hover=false"
最好的方法是使用hostListeners-'mouseenter'和'mouseleave'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.