Show variously colored information for each selection from the dropdown using Angular Material

Question

Show variously colored information for each selection from the dropdown using Angular Material

I am trying to change the color of displayed content based on user selection in an Angular application. Specifically, when a user chooses an option from a dropdown list, I want the displayed text to reflect their choice by changing colors. For example, if the user selects "Confirmed" from the dropdown, the text should display in green. If they select "Not Confirmed", the text should be red. And if they choose "Confirmed and Shipped", the text should appear yellow. I have been struggling to implement this functionality as I am new to Angular. Any guidance on how to achieve this would be greatly appreciated.

<mat-form-field>
  <mat-select placeholder="Status" [formControl]="statusTypeFilter">
    <mat-option value="1">Confirmed</mat-option>
    <mat-option value="2">Not Confirmed</mat-option>
    <mat-option value="3">Confirmed and Shipped</mat-option>
</mat-form-field>


<div class="table-container mat-elevation-z8">
  <table mat-table [dataSource]="ItemConfirmationList" multiTemplateDataRows matSort matSortActive="no">
    <ng-container matColumnDef="StatusName">
      <th mat-header-cell *matHeaderCellDef mat-sort- header>Status</th>
      <td mat-cell *matCellDef="let element">{{element.StatusName }}</td>
    </ng-container>
</div>

css angular typescript angular-material

Answer 1

Answer №1

Here are a few steps I took:

We saved the selected value from the dropdown in a variable.
For each row in our table, we compared the status to this variable and if there was a match, we applied the appropriate class.

Here is the appropriate HTML:

<mat-form-field>
    <mat-label>Status</mat-label>
    <mat-select [(value)]="selected">
        <mat-option *ngFor="let food of foods" [value]="food.value">
            {{food.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>
<!-- <p>You selected: {{selected}}</p> -->
<hr/>
    <table>
        <thead>
            <tr>
                <td> Item </td>
                <td> Status </td>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor='let pickedItem of sampleItems; let idx = index'>
                <tr [ngClass]="setColor(pickedItem.status, idx)">
                    <td> {{pickedItem.item}}</td>
                    <td>
                        <span *ngIf='pickedItem.status == 1'> Confirmed </span>
            <span *ngIf='pickedItem.status == 2'> Not Confirmed </span>
            <span *ngIf='pickedItem.status == 3'> Confirmed and Shipped </span>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </table>

Here is the appropriate TypeScript function:

setColor(statusVal, idx){
  let returnedClass:string ='defaultClass';
  (statusVal == this.selected && statusVal ===1) ? returnedClass = 'confirmedClass' : 'defaultClass';
  (statusVal == this.selected && statusVal ===2) ? returnedClass = 'notConfirmedClass' : 'defaultClass';
  (statusVal == this.selected && statusVal ===3) ? returnedClass = 'shippedClass' : 'defaultClass';
  return returnedClass;
}

Here is the appropriate CSS:

.confirmedClass { color:green;}
.notConfirmedClass { color:red;}
.shippedClass { color:orange;}
.defaultClass { color:#000;}

Check out the complete example on StackBlitz

Answer 2

Here are a few steps I took:

We saved the selected value from the dropdown in a variable.
For each row in our table, we compared the status to this variable and if there was a match, we applied the appropriate class.

Here is the appropriate HTML:

<mat-form-field>
    <mat-label>Status</mat-label>
    <mat-select [(value)]="selected">
        <mat-option *ngFor="let food of foods" [value]="food.value">
            {{food.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>
<!-- <p>You selected: {{selected}}</p> -->
<hr/>
    <table>
        <thead>
            <tr>
                <td> Item </td>
                <td> Status </td>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor='let pickedItem of sampleItems; let idx = index'>
                <tr [ngClass]="setColor(pickedItem.status, idx)">
                    <td> {{pickedItem.item}}</td>
                    <td>
                        <span *ngIf='pickedItem.status == 1'> Confirmed </span>
            <span *ngIf='pickedItem.status == 2'> Not Confirmed </span>
            <span *ngIf='pickedItem.status == 3'> Confirmed and Shipped </span>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </table>

Here is the appropriate TypeScript function:

setColor(statusVal, idx){
  let returnedClass:string ='defaultClass';
  (statusVal == this.selected && statusVal ===1) ? returnedClass = 'confirmedClass' : 'defaultClass';
  (statusVal == this.selected && statusVal ===2) ? returnedClass = 'notConfirmedClass' : 'defaultClass';
  (statusVal == this.selected && statusVal ===3) ? returnedClass = 'shippedClass' : 'defaultClass';
  return returnedClass;
}

Here is the appropriate CSS:

.confirmedClass { color:green;}
.notConfirmedClass { color:red;}
.shippedClass { color:orange;}
.defaultClass { color:#000;}

Check out the complete example on StackBlitz

Answer 3

Answer №2

It is recommended to create 3 distinct CSS styles, each tailored for a different status.

CSS Styles

.confirmed {
  color: green;
}
.not-confirmed {
  color: red
}

Subsequently, incorporate the use of [ngClass] in your template to implement the CSS styles accordingly:

<td [ngClass]="{ 'confirmed': status === 'Confirmed', 'not-confirmed': status === 'Not Confirmed', 'confirm-shipped': status === 'Confirmed and Shipped' }"
 mat-cell *matCellDef="let element">
   {{element.StatusName}}
</td>

Note: It is assumed that the value selected from the dropdown menu is stored in the variable status.

Answer 4

It is recommended to create 3 distinct CSS styles, each tailored for a different status.

CSS Styles

.confirmed {
  color: green;
}
.not-confirmed {
  color: red
}

Subsequently, incorporate the use of [ngClass] in your template to implement the CSS styles accordingly:

<td [ngClass]="{ 'confirmed': status === 'Confirmed', 'not-confirmed': status === 'Not Confirmed', 'confirm-shipped': status === 'Confirmed and Shipped' }"
 mat-cell *matCellDef="let element">
   {{element.StatusName}}
</td>

Note: It is assumed that the value selected from the dropdown menu is stored in the variable status.

Show variously colored information for each selection from the dropdown using Angular Material

Answer №1

Answer №2

Similar questions

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

[CSS] What's the trick to getting it to smoothly glide to the top?

Activate a tooltip on the button depending on the value entered in the search field

Adjust Fabric js Canvas Size to Fill Entire Screen

Why am I unable to retrieve the property from the JSON file?

Leverage Sinon's fakeServer in combination with promises and mocha for efficient

The routing navigate method is failing to direct to the desired component

Strategies for enhancing performance in an Angular 4 project

The chosen Material UI tab stands out with its distinct color compared to the other tabs

An error has occurred: Inconsistency found in metadata versions for angular2-flash-messages

Learning the process of interpreting form data in Node.js

Break down the provided Array type into distinct new types

What is the CSS method for determining the distance from the top of a container to the edge of the window?

Is there a different approach available since the array function "some" does not restrict type even when a type predicate is implemented?

Encountering a module not found error when attempting to mock components in Jest unit tests using TypeScript within a Node.js

Forward user to a subdomain once they have successfully logged in on an Angular 2 application

Leveraging ngIf and ngFor within choice

Switching from a layout of 3 columns to 2 columns on iPad when orientation is changed to portrait

Tips for selecting specific types from a list using generic types in TypeScript

Angular 2 component: Harnessing the power of boolean inputs