CODEWITHSUNDEEP
angularionic-framework
ferdi_
ferdi_

Reputation: 45

Conditional border color

I would like to set the border-color of an item depending on its category. I tried using [ngStyle] and style.color but it doesn't work. Can someone help me ? 

<ion-grid *ngFor="let item of items" (click)="openDetail(item)" [style.color]=" api.getCategoryColor(item.categories[0])">

Thank you

Edit : it works when setting color "blue" for example : 

<ion-row [style.border]="'solid 1px ' + 'blue'" >

Upvotes: 2

Views: 5097

Answers (3)

Martin Parenteau
Martin Parenteau

Reputation: 73731

You can set the border color with:

[style.border-color]="api.getCategoryColor(item.categories[0])"

Make sure that a border is always present, for example with a class style:

<ion-grid class="gridBorder" ...>

.gridBorder {
  border-style: solid;
  border-width: 1px;
}

or by binding the border style itself, as suggested by @fatemefazli.

If you need to use SCSS variables, you can bind a style class to the element:

<ion-grid class="gridBorder" [ngClass]="api.getCategoryClass(item.categories[0])" ... >

and set the border color with SCSS variables in each class:

.cat1 {
  border-color: $cat1_Color;
}

.cat2 {
  border-color: $cat2_color;
}

Upvotes: 2

Lia
Lia

Reputation: 11982

try:

[style.border]=" '1px solid '+ api.getCategoryColor(item.categories[0])"

check this working stackblitz

Upvotes: 2

windmaomao
windmaomao

Reputation: 7671

You need to make sure if this CSS setting is applied to ion-grid or the actual DOM element that will reflect the color change. Normally component itself is just a <div> element.

What you could do is to first find that element, and just apply CSS directly to it as a first test. If it works, then you have options to either wrapping that CSS in your own component, or leaving that CSS in your global style sheet. Either way is manageable.

Upvotes: 0

Related Questions