Implementing dynamic styles for a checked mat-button-toggle in Angular 6

How can I customize my button-toggle when it is checked? The current code I have doesn't seem to be working...

This is the code snippet:

<mat-button-toggle-group #mytoggle (change)="selectoption($event)" value="{{num}}">
            <mat-button-toggle [style.background-color]="getColor(op)" *ngFor="let op of mylist" [value]="op">{{op}}</mat-button-toggle>
        </mat-button-toggle-group>

This is the method in my .ts file:

 getColorChecked(opcao: any){
        if ( opcao === 2){
            return '#EA0B28 !important;';
        }else{
            return '#9d9b9a !important;';
        }
    }

And here is the scss styling:

.mat-button-toggle-group, .mat-button-toggle-standalone{
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.02), 0 2px 2px 0 rgba(0,0,0,.01), 0 1px 5px 0 rgba(0,0,0,.12);
}   
 .mat-button-toggle{
      border-right: 1px solid #cccccc40 !important;
      font-weight: 400;
      width: 50px !important;
      padding: 0px !important;
      background: #f7f9fbc7 !important;
      div{
        padding: 0px !important;
      }
    }
    .mat-button-toggle-checked {
      color: #fbfbfb;
    }

The customization is not applying properly. Any suggestions on a better approach?

htmlcssangulardynamicstyles

Answer №1

Method 1: Uniform color for all chosen buttons

To achieve this, simply incorporate the following CSS Class:

.mat-button-toggle-appearance-standard {
    background-color: #9d9b9a;
    color:white;
}

.mat-button-toggle-checked {
    background-color: #EA0B28;
    color:white;
}

https://i.sstatic.net/k8YjF.gif

Method 2: Individual colors for selected buttons

Add these CSS Classes: :nth-child(x) to target specific items based on their position in the document

.bg-red:nth-child(1) {
    background-color: red;
    color:white;
}

.bg-green:nth-child(2) {
    background-color: green;
    color:white;
}

.bg-blue:nth-child(3) {
    background-color: blue!important;
    color:white;
}

HTML: 

<mat-button-toggle-group>
  <mat-button-toggle *ngFor="let op of mylist" 
    [value]="op" 
    [ngClass]="{'bg-red':selected === 1,'bg-green':selected === 2,'bg-blue':selected === 3}" 
    (click)="selected = op"> {{op}}
  </mat-button-toggle>
</mat-button-toggle-group>

TS:

export class ButtonToggleOverviewExample {
  mylist = [1,2,3];
  selected;
}

https://i.sstatic.net/C9lwB.gif

Try it out on StackBlitz

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Find and make adjustments to the primary HTML document in your Magento online shop

Trying to enhance the top banner of my Magento website tamween.biz by adding a shadow effect PNG picture. Successfully managed this on my local server using firebug and creating a new class in the coding area with all selector properties modified in the bo ...

htmlmagentolocate

Is it possible to dynamically change a form's input value using a JavaScript keyup function based on input from other form elements?

My form utilizes the keyup function to calculate the total value of 3 input fields by multiplying them and displaying the result. Below is a fiddle showcasing this functionality: $(document).ready(function () { $(".txtMult1 input").keyup(multInp ...

javascriptjqueryhtmlformskeyup

Ways to achieve text transparency with CSS without converting it to an image

Is there a way to have my navigation bar indicate the selected page by changing the text color and adding a black background, while making only the text inside the current page nav transparent? For example, you can see the effect here: sammarchant.co.uk/n ...

css

Obtaining visuals in a specific manner

I have a customized slider (flexslider) with 10 images per slide. The images are currently manually inserted, but I want to optimize the slider to dynamically extract images using PHP. However, my current setup only displays one image per slide. How can I ...

phphtmlcss

Verifying the visibility status of a div and toggling a class based on it

I'm facing a challenge with multiple checkboxes in a row. When a button is clicked, it displays a div (#locale_container), and flips a small arrow by adding a rotated class. However, I only want the arrow to flip when the div is being shown or hidden ...

javascriptjqueryhtml

Show a message notifying the user of an incorrect password input

Hey there, currently I have a script set up which logs into live.com in this manner: WebBrowser1.Document.GetElementById("login").SetAttribute("value", txtUsername.Text) WebBrowser1.Document.GetElementById("passwd").SetAttribute("value", txtPass ...

htmlvb.netauthenticationcredentialsaccount

What is the proper method for changing the height of this component in HTML?

Hey there! I'm brand new to HTML and I'm embarking on a little project for myself to enhance my skills. I have a question about adjusting the height of some text - I want it to look similar to Twitter, where each "tweet" is clearly separated from ...

htmlcss

Design a unique border for a div element that extends a top-border all the way through the header and a bottom-border that

I am trying to achieve the design displayed in this mockup: https://i.sstatic.net/sYEPu.png Here is my current progress: https://codepen.io/raney24/pen/VOmjBY .header-border { width: 100%; margin-bottom: 10px; border-left: red solid 1px; border ...

htmlcssborder

What could be causing the spinner (Bootstrap 5.x) to not show up on the screen

I'm having trouble getting a spinner to show up when a user clicks a form submit button. Below is the HTML code to add a <div> for the spinner: <div class="pageloader"> <img src="../images/loader-large.gif" alt ...

cssjquery-uibootstrap-5

When the search is focused, I prefer for the expanding search box to overlay the menu section rather than pushing it aside, all without the use

I am working on a search box with a subtle animation: <input class="search" type="search" placeholder="Search"> To make it expand when focused, I used the following CSS: .search:focus { width: 225px; outline: none; } I also experimented w ...

htmlcsssearch

Uh oh! AngularJS just threw an error: Uncaught TypeError - angular.service is not a function. It happened in taskService.js

I've run into some issues with AngularJS, even though I have imported all the necessary libraries. Specifically, I am encountering the following errors: Uncaught TypeError: angular.service is not a function at taskService.js:2 taskFactory. ...

javascripthtmlangularjsangular-module

What role do colors and tables play in Javascript?

Preparing for my upcoming Web Development exam, I stumbled upon an intriguing question: Here's how I tackled it: function pallete() { var components = ["00", "33", "66", "99", "CC", "FF"]; var context = document.body; var ...

javascripthtmlweb-safe-colors

Why are my variables resetting in Angular after ngAfterViewInit?

There seems to be an issue with my variables resetting after successfully using them in ngAfterViewInit(). I have a few @ViewChild and regular variables that are utilized or set in ngAfterViewInit. However, when certain events that I added post-initializa ...

javascriptangulartypescript

Modifying the value of a property in an object array created using the map method is ineffective

I have a collection of objects: https://i.sstatic.net/XNrcU.png Within the collection, I wished to include an additional property to the objects. To achieve this, I utilized the map function: returnArray = returnArray.map((obj) => { obj.active = "fal ...

javascriptangulartypescript

The project is experiencing difficulties in loading the Module CSS

Currently, I am working on a React module and have set up a React project to demonstrate the functionality of this module. Initially, everything was working smoothly until I encountered an issue with the webpack configuration related to the CSS loader. { ...

cssreactjsnpm

Designing a card flip animation featuring front and back faces without using absolute positioning

Looking to enhance my website with a new feature that incorporates the card-flipper schema found on David Walsh's site: https://davidwalsh.name/css-flip. The challenge arises from the fact that the content within my cards is dynamic, making the height ...

htmlcsscss-positioncss-transforms

Finding tool for locating object names in JSON

JSON data: [ { "destination": "Hawaii", "Country": "U.S.A", "description": "...and so forth", "images": { "image": [ "hawaii1.jpg", "hawaii2.jpg", ...

javascripthtmlarraysjsondom

Could someone please advise me on how to prevent the second animation from being overridden?

After attempting to separate the animations with a comma and placing them on the same transform, I am still encountering issues. * { margin: 0px; padding: 0px; box-sizing: border-box; } html, body { width: 100%; height: 100%; } .container { ...

htmlcssanimationcss-animationskeyframe

Angular - enabling scroll position restoration for a singular route

Is there a way to turn off scroll restoration on a specific page? Let's say I have the following routes in my app-routing.module.ts file... const appRoutes: Routes = [{ path: 'home', component: myComponent}, { path: 'about', compon ...

angulartypescriptroutes

Exploring the capabilities of the hardware camera in Angular 2

Struggling to implement the tutorial in Angular2. The challenge lies in making navigator.mediaDevices.getUserMedia function properly. The error message indicates that mediaDevices is not recognized on type 'navigator'. Refer to the media capture ...

angulartypescriptangular-clingcordova