Each checkbox is showing up twice

user_8524094 0
Viewed 578

I am trying mat-checkbox in Angular. Basically trying to design payment method UI. So, I used mat-checkbox to select one payment method. But each box is showing up double. Here I am adding my code:

<div fxLayout="column" fxLayoutGap="1rem">
          <p>Select Payment Method</p>
          <mat-checkbox>Cash On Delivery</mat-checkbox>
          <mat-checkbox>Online Payment</mat-checkbox>
          <mat-checkbox>Wallet</mat-checkbox>
        </div>

Also I am adding an Image of my UI:

enter image description here

angular-flex-layout angular typescript
3 Answers

It seems like some material styling is missing.

Check the installation guide from the official docs: Angular Material | Getting Started

ng add @angular/material

The ng add command will install Angular Material, the Component Dev Kit (CDK), Angular Animations and ask you the following questions to determine which features to include:

    Choose a prebuilt theme name, or "custom" for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

    Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

    Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular's animation system. Declining this will disable most of Angular Material's animations.

The ng add command will additionally perform the following configurations:

    Add project dependencies to package.json
    Add the Roboto font to your index.html
    Add the Material Design icon font to your index.html
    Add a few global CSS styles to:
        Remove margins from body
        Set height: 100% on html and body
        Set Roboto as the default application font
user_64428410

I ran into a similar problem, when i tried to add angular material in an existing project and the style.css file didn't update properly.

Here what i did:

  • Go to file style.css of the project.

    Add: @import "~@angular/material/prebuilt-themes/indigo-pink.css"; //Use the prebuilt theme name you choose.

You can found more info here: How do I fix building errors with Angular Material Components?

Hope that's help.

user_171110750

To fix this with CSS we can use the below code:

.mat-checkbox-checked .mat-checkbox-checkmark{
   opacity: 0 !important;
}
user_46576230
Related