Tips for customizing the appearance of a specific mat-button component in an Angular project

In my Angular application, I have set up a scenario where users are presented with multiple choices through buttons. When a user clicks on a button, a specific component is displayed based on their choice. I am currently working on enhancing the styling of these buttons to visually indicate which choice has been selected.

<div  fxLayout="row" fxLayoutAlign="space-between center" fxFill>
<div *ngFor="let button of buttons">
    <button
        mat-stroked-button
        *ngIf="button.type === 'button'"
        (click)="buttonPressed()"
        ngxScrollTo
    >
        {{ button.text }}
    </button>
</div>

<div  fxLayout="row" fxLayoutAlign="space-between center">
    <div *ngIf="item.hasSomeProperty | isTypeButton">
        <button mat-mini-fab (click)="buttonPressed()">
            <mat-icon>close</mat-icon>
        </button>
    </div>
</div>

Here's an illustration of the desired outcome: https://i.sstatic.net/LKLqN.png

Your assistance in achieving this goal would be greatly appreciated.

htmlcssangularangular-materialangular-material2

Answer №1

To implement button selection using Angular, you can utilize the [ngClass] or [ngStyle]:

<div *ngFor="let button of buttons">
    <button
        mat-stroked-button
        *ngIf="button.type === 'button'"
        [ngClass]="{'disabledButton': !button.selected}"
        (click)="buttonPressed(button)"
        ngxScrollTo
    >
        {{ button.text }}
    </button>
</div>

If your button model includes a property named "selected" to track the selected state:

buttonPressed(button: Button) {
    // Select only the clicked button
    this.buttons.forEach(b => b.selected = b === button);
}

In your CSS file, define the styling for disabled buttons:

.disabledButton {
     opacity: 0.75;
}

Please note that this is a general implementation and may need adjustments based on the specific requirements.

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

Learn how to save user input from form fields and text areas into JSON format using Angular

Is there a way to add comments using Angular when a user clicks on a button? Currently, whenever text is entered in the input field or textarea, it disappears and an empty block without any name, country, and comments is displayed. The entered text should ...

htmlangularjsjson

Avoiding the occurrence of extra space due to the p tag for paragraphs

I'm currently using the following <p> tag but it's creating a gap between the tick mark and the text that follows after the closing </p> <p class="tick">✓</p> Post messages to friends all over the world. CSS: .tick { ...

htmlcssclassfonts

Steps for Creating an Animation Tool based on the Prototype:

One question that recently came up was: What is the best approach to tackling this issue? Developing a tool that enables designers to customize animations. To make this process easier, it is essential to create an AnimationSequence using JavaScript that ca ...

javascriptjquerycssanimationjquery-animate

Detecting Collisions in a Canvas-Based Game

As part of my educational project, I am developing a basic shooter game using HTML5 canvas. The objective of the game is to move left and right while shooting with the spacebar key. When the bullets are fired, they travel upwards, and the enemy moves downw ...

javascripthtmlcanvashtml5-canvas

The elements appear tiny while the resolution is excessively large on the Ionic mobile device

I recently finished developing an Ionic project and successfully compiled it for both iOS and Android. Surprisingly, everything seems to be working fine on Android devices but I am encountering issues on iOS and when viewing the project from Chrome's ...

angulartypescriptionic-frameworkionic5

Using images in R Shiny with htmlTemplate: A step-by-step guide

In my current project, I have a file named template.html that I am loading using the code snippet below: https://i.sstatic.net/TipvS.png One issue I'm facing is including an image in this template.html file. Despite having the correct relative path ...

htmlrshiny

The HTML grid is causing an irritating excess space on the right side of my website

After brainstorming an idea, I decided to create this website for testing purposes. However, the grid layout seems to be causing an unwanted margin on the right side of the page that is not associated with any HTML tag, disrupting the zoom functionality. ...

javascripthtmlcssmargin

Inputting Information into a MySQL Database Using an HTML Form

Hey everyone! I have a simple web form that is supposed to input data into a MySQL database. I wrote some code to check if the connection to my database was working, and it seemed fine. However, when I submitted the form, no data was actually entered into ...

phphtmlmysqlforms

Can a button be incorporated into an accordion feature using DevExtreme Angular?

I am using devextreme-angular and I would like to include two buttons such as DELETE and EDIT to accordion. The accordions receive the posts I typed so i have title and content for each accordion. What I need now is to add these buttons to each of the cont ...

angulardevextreme

Seeking a light-weight, text-rich editor specifically designed for use on our enterprise website. This editor should be even lighter than TinyMCE

I am in search of a lightweight text editor for an enterprise website, lighter than tinymce with basic buttons for the comment form. It is imperative that the editor also functions properly in IE6. So far, I have tried cleditor 15KB, but it has an issue in ...

javascriptjquerycsstextareatext-editor

Angular 2: What is the reason for preventing the use of subscribe on the Subscriber object?

If I have an observable object o : let o: Observable<Object> = ... I am able to subscribe to this object, but why is it not permitted to subscribe to the Subscriber object? To illustrate with a real-life example: myServiceCall() { let o: O ...

angular

Responsiveness of the element along the vertical axis

I have an element that, when clicked, should display additional content. However, when the headline contains a lot of text, the element does not expand vertically as it should. Thank you for your help! Check out how it looks currently This is my HTML co ...

htmlcssresponsive-designresponsiveness

I am unable to retrieve data using JavaScript

I am struggling to fetch data with JavaScript and display it in the console. Can anyone point out what I might be doing incorrectly? main.js // ADD TO CART $("#addToCartBtn").on('click',function(){ var _qty=$("#productQty") ...

javascripthtmldjangodjango-templates

Automatically adapt the height of a bootstrap button based on the dimensions of other bootstrap buttons

First and foremost, my objective is to centrally align a glyphicon both vertically and horizontally within a button. Despite attempting CSS attributes like position: relative; and position: absolute;, my efforts have been in vain. You can check out the sam ...

jquerycsstwitter-bootstrap

Load a page from a different domain using uframe

Looking for a solution to successfully load an external URI using uFrame. Currently encountering an "Access Denied" issue when attempting to do so on Firefox. Any suggestions? ...

javascripthtmluframe

Can anyone tell me the source of this switchmap's argument?

Currently, I am enrolled in Jogesh Muppala's Angular course on Coursera and encountered an issue with the code snippet below. this.route.params.pipe(switchMap((params: Params) => this.dishService.getDish(+params['id']))) The remaining c ...

angularrxjsangular2-observables

Button for enabling and disabling functionality, Delete list in Angular 2

I am looking to toggle between the active and inactive classes on a button element. For example, in this demo, there are 5 buttons and when I click on the first button it removes the last one. How can I remove the clicked button? And how do I implement the ...

angularjsangulartypescriptionic-framework

Managing CORS in Angular2 for REST WebApi calls

Currently, I am utilizing an Angular 2 front end along with a WebApi backend where the WebApi is CORS enabled. var cors = new EnableCorsAttribute("*", "*", "*"); GlobalConfiguration.Configuration.EnableCors(cors); This setup works well with different sit ...

angularasp.net-web-apicors

Acquire elements and variables from another component using a dual @NgModule setup in Angular2

I am looking to retrieve the value of the element variable and _dataTable component from the datatable.component.ts file (specifically from the render() function) in order to create a new event for a new button using element.on. Alternatively, I could crea ...

angularvariablescomponentsng-modules

Executing a click event on an HTML table dynamically created from an AJAX request

I have a script that creates an html table displaying Users of the application, with options to either EDIT or DEACTIVATE each user. These actions are handled using AJAX. The table structure is as follows: <tr><td><a id='edit_link&apo ...

jqueryhtmlajax