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

Having trouble getting undefined values for keys while attempting to retrieve all the data from Firebase DB with Angular

Proper Alignment of Div Elements

Guide to utilizing Angular's translate i18n key as a dynamic parameter within HTML

Unknown error occurred in Eventstore: Unable to identify the BadRequest issue

Positioning an absolute div inside a relative div within a v-for loop while using VueJS and Element UI

I possess a JSON array object and need to identify and extract the array objects that contain a specific child node

Using the ng-app directive value with HTML and CSS can sometimes cause issues and the styles may not apply

Troubleshooting: Imported Variable in Angular 2+ Throwing Module Not Found Error

Navigating through nested JSON Objects for dropdown functionality in Angular 6 - a step-by-step guide

Guide to organizing the sequence of text in HTML and CSS

Completion status of circle loader: 100%

Calculate the quantity of rows within a specific div container

Encountering difficulties when attempting to include Spartacus in an Angular application

Is there a method to enhance the efficiency of generating the code coverage report in VSTS?

Change the hover effects on the desktop to be more mobile-friendly

Guide on transferring an array from a regular HTML page to an Angular web component

Encountering an issue while attempting to load in Angular2 RC4: Error: XHR error (404 Not Found) during loading

Creating a personalized toolbar for Quill in your Angular project

Use CSS3 to hide the <li> elements initially and make them appear when the <li> is clicked on

Dragging and dropping elements using Angular's CDK into a Material dialog box