I am trying to have rows in a table highlight based on a STATUS value. I can get it working with either yellow or no color by doing:
[ngStyle]="{'background-color': cnresult.STATUS === 1 ? 'yellow' : ''}"
How can I add another option where if STATUS === 2 it goes to red?
You can create a map object in the ts file
colorMap = {
'1': 'yellow',
'2': 'red',
}
<div [ngStyle]="{'background-color': colorMap[cnresult.STATUS] || ''}"></div>
By this you can add multiple conditions
You can do something like this as well,
[ngStyle] = "{'background-color': getBackground(cnresult.STATUS)}"
Then in your component.ts file,
getBackground(status) { (2)
switch (status) {
case 1:
return 'yellow';
case 2:
return 'green';
case 3:
return 'red';
}
}
You can chain multiple ternary operations
[ngStyle]="{'background-color': cnresult.STATUS === 1 ? 'yellow' : cnresult.STATUS === 2 ? 'red' : ''}"
Another, possibly more maintainable option would be to conditionally apply class(es) like so:
<div [class.yellow]="cnresult.STATUS === 1"
[class.red]="cnresult.STATUS === 2"
></div>
// This belongs in your .css file
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
Related
I have a list of chats, and I like to change the color of ion-icon depending on the status of a chat(from attribute chat.status):
<ion-list *ngFor = "let chat of chats">
<ion-item>
<ion-icon name="ellipse-outline" slot ="end" color ="primary"></ion-icon>
<ion-label>
<h2> {{chat.username}} </h2>
</ion-label>
</ion-item>
</ion-list>
The icon color should be red when chat.status is A and green when chat.status is B. How can I do this?
Thanks a lot
You can use the ternary operator to set the color in that way:
[color]="chat.status === 'A' ? 'danger' : 'success'"
I'm using Ionic's danger as the red color, and Ionic's success color as the green color but you can add your own colors if you want.
Another option could be to add a class to the ion-icon element and set the color using CSS (like explained in https://ionicons.com/usage):
<ion-icon
slot ="end"
name="ellipse-outline"
[class.red]="chat.status === 'A'"
[class.green]="chat.status === 'B'"
></ion-icon>
And then in your scss file:
ion-icon.red {
color: red; // your red color
}
ion-icon.green {
color: green; // your green color
}
One way to do it is using style binding in your template:
<ion-icon name="ellipse-outline" slot ="end"
[style.color]="chat.status === 'A' ? 'red' : chat.status === 'B' ? 'green' : 'black'"></ion-icon>
Another way is using a directive in your template:
<ion-icon name="ellipse-outline" slot ="end" [ngStyle]="colorIcon()"></ion-icon>
You can control the styles from your component returning an object:
public colorIcon(): Object {
if (chat.status === 'A') {
return {color: 'red'}
} else if (chat.status === 'B') {
return {color: 'green'}
} else {
return {}
}
}
You can also directly provide hex color using style binding
<!-- mycolor = "#123456" -->
<ion-icon [style.color]="mycolor" name="square"></ion-icon>
i want to apply style to span tag using typescript in react. I have a label counter with value next to it. something like below
counter 0
I have a component Label like below,
interface Props {
color?: string;
size?: number;
}
const Label = styled.span<Props>`
color: ${props => props.color || props.theme.colors.text};
`;
and in my other component i use the label like below,
render = () => {
const count_var = 0;
return (
<div>
<Label> counter </Label>
<span style={{ color: counter === 0 ? 'red' : counter === 1 ? 'blue' : 'green' }}>
{count_var} </span>
</div>
)
}
from the above code, as you see i have place count variable within span tag since want to add a class to the count variable based on its value. and the output for above code would be like below,
counter0
How can i use the Label component to apply style to counter variable based on its value...
if count var is 0 then should be in color red
if count var is 1 then should be in color blue
if count var is > 1 then should be in color green
Also i need to have a space between counter text and its value like below
counter 0
I am new to using typescript and not sure how to use styles using it. could someone help me with this. thanks.
I would like to use my color which is defined in CSS file for my ngStyle directive (which is in HTML).
This is what i've got in my HTML:
[ngStyle]="{backgroundColor: isDarkStyle() ? '#29434e' : isNormalStyle() ? '#cfd8dc' : isLightStyle() ? 'white': ''}"
This my CSS file with colors:
//colors for background
$light-background: white;
$normal-background: #cfd8dc;
$dark-background: #29434e;
But i want this:
[ngStyle]="{backgroundColor: isDarkStyle() ? '$dark-background' : isNormalStyle() ? '$normal-background' : isLightStyle() ? '$light-background': ''}"
How can I achieve this result? Thanks for help :)
Use [ngClass]
See stackblitz:https://stackblitz.com/edit/hello-angular-6-refjye?file=src%2Fapp%2Fapp.component.html
.light{
background: white;
}
.normal{
background: #cfd8dc;
}
.dark{
background: #29434e;
}
in Html
<p [ngClass]="isDarkStyle() ? 'dark' : isLightStyle() ? 'light': isNormalStyle()?'normal':''">
Start editing to see some magic happen :)
</p>
try solution
As I understood your queston:
HTML:
<h1 [ngStyle]="{backgroundColor: isDarkStyle() ? 'red' : isNormalStyle() ? 'green' : isLightStyle() ? 'white': ''}">Text</h1>
TS:
isDarkStyle() {
return false
}
isNormalStyle() {
return true
}
isLightStyle() {
return true;
}
You can defined ngClass or ngStyle
ngClass required to define class in your style file
<h1>ngClass</h1>
<p [attr.class]="state">
Start editing to see some magic happen :)
</p>
<button (click)="state = 'light'">light</button>
<button (click)="state = 'dark'">dark</button>
<button (click)="state = 'normal'">normal</button>
ngStyle you can change spisifc css properties like background-color
<h1>ngStyle</h1>
<p [ngStyle]="{'background-color':color}">
Start editing to see some magic happen :)
</p>
<button (click)="color = '#fff'">light</button>
<button (click)="color = '#cfd8dc'">dark</button>
<button (click)="color = '#29434e'">normal</button>
stackblitz example
Good afternoon, I am trying to write a SPA with React.
I get a JSON-Object from a webservice wich validates the Inputfields.
Now i want so set the Style of the Inputfield depending on the answer of the Webservice.
At example the Style shoud be:
style={{borderColor: 'green', boxShadow: '0 0 5px green',}}
when the JSONValue is 0
<Input
style = ???
...
/>
My JSON looks like this:
{
"validate": {
"isValidTest": 0
...
}
}
edit: the JSON can have three diffrent Values witch three different Styles.
This is an example of what you could do
Example 1
<Input
style =
{{borderColor: obj.validate.isValidTest === 0 ? 'red':'green'
boxShadow: `0 0 5px ${obj.validate.isValidTest === 0 ? 'red' : 'green'}`}}
...
/>
What's happening here
By utilizing the shorthand conditionals we can apply a borderColor & boxShadow to the style depending on the value of isValidTest within obj (which will be replaced by the name of your object)(!!)
Have a look at this example to see what is happening here
NOTE
Ofcourse, this could be separated from the inline style attribute by setting a className depending on the outcome of isValidTest or by applying a different style constant to it depending on the same conditional
Example 2
const errorStyles = {
borderColor: 'red',
boxShadow: '0 0 5px red'
}
const validStyles = {
borderColor: 'green',
boxShadow: '0 0 5px green'
}
<Input
style={ obj.validate.isValidTest === 0 ? errorStyles : validStyles }
/>
Again, in this sandbox both examples are shown in the same file, on the same page.
You could also have a look at this question & answer for more examples and information
EDIT
To account for more than two values in isValidTest you could go at it like so:
const errorStyles = {
borderColor: 'red',
boxShadow: '0 0 5px red'
}
const validStyles = {
borderColor: 'green',
boxShadow: '0 0 5px green'
}
const error2Styles = {
borderColor: 'magenta',
boxShadow: '0 0 5px magenta'
}
const valid2Styles = {
borderColor: 'yellow',
boxShadow: '0 0 5px yellow'
}
isValid = (valid) => {
switch(valid) {
case -1:
return errorStyles
break;
case 0:
return error2Styles
break;
case 1:
return validStyles
break;
case 2:
return valid2Styles
break;
}
}
<Input
style={this.isValid(obj.validate.isValidTest)}
/>
What happens in the above example
As seen above the style attribute refers to this.isValid which in turn return a const containing the styles, supplied to this function is the isValidTest property from your obj.validate.
I have updated the sandbox to include the above example
Hope this helps!
Using Angular 2, I have a table with striped rows and when I click a row it turns green and only one row can be green at a time. I want to add the functionality that if a row that is currently clicked on (turned green) is clicked again, it reverts back to the color it was before originally being clicked. Right now a row will only revert back to its original color if a different row is clicked.
Table without any rows clicked:
Table when the second row is clicked:
HTML grey is #d3d3d3. Green is #015939:
<tr *ngFor="let dPoint of theData; let idx=index; let even=even" (click)="onClick(dPoint, idx)" (row)="received($event)" id="{{dPoint.tDataPoint}}"
[style.backgroundColor]="clickedRow == idx ? '#015939' : (even ? 'white' : '#d3d3d3')" [style.color]="clickedRow == idx ? 'white' : '#015939'">
<td>{{dPoint.tDataPoint}}</td>
<td>{{dPoint.tICCP}}</td>
<td>{{dPoint.tStartDate}}</td>
<td>{{dPoint.tEndDate}}</td>
</tr>
Typescript:
onClick(message:DataTable, idx:any){
this.clickedRow = idx;
//more code that isn't relevant to this functionality
}
Just set idx to a non-existing index to make no row selected:
onClick(message:DataTable, idx:any){
if(this.clickedRow == idx) {
this.clickedRow = -1;
} else {
this.clickedRow = idx;
}
//more code that isn't relevant to this functionality
}