How to Remove Button Style or Overwrite Dynamically Added Classes to Button in Material2

How to remove button style or overwrite dynamically added classes to button in material2

I suggest two solutions:

1. First, set an additional class on that button in order to avoid that all the mat-raised-buttons be affected by the style change, it's not your aim, I suppose.

HTML:

<button mat-raised-button class="myButton" (click)="openDialog();">Pick one</button>

CSS:

.myButton:focus{
box-shadow: 0 0 rgba(255, 255, 255, 1) !important;
transition:none !important;
background-color: rgba(255, 255, 255, 1) !important;
-webkit-tap-highlight-color:rgba(255, 255, 255, 1) !important;
}

Then you can set the style of mat-raised-button either by

a) setting it in component's stylesheet with ::ng-deep:

::ng-deep .myButton>.mat-button-focus-overlay {
background-color:transparent !important;
}

::ng-deep .mat-app-background{
background: white !important
}

Demo

b) setting with ViewEncapsulation.none:

Class:

import { ViewEncapsulation } from '@angular/core';
...
@Component({
...
encapsulation:ViewEncapsulation.None
})

CSS:

.myButton>.mat-button-focus-overlay {
background-color:transparent !important;
}

.myButton>.mat-app-background{
background: white !important
}

Demo

c) setting it in style.css:

.myButton>.mat-button-focus-overlay {
background-color:transparent !important;
}

.myButton>.mat-app-background{
background: white !important
}

Demo


  1. The button gets the focus when you click on it. Turn away the focus from that button by setting the focus on an other element:

...
<input matInput #input [(ngModel)]="name" placeholder="What's your name?">
...
<button mat-raised-button class="myButton" (click)=" input.focus();openDialog() ">Pick one </button>

Demo

How can I change Angular Material button background color on hover state?

As of Angular 6, the use of /deep/ or ng-deep in the chosen solution is marked for deprecation. The recommended way is to use global styles as stated in the docs.

Some Angular Material components, specifically overlay-based ones like
MatDialog, MatSnackbar, etc., do not exist as children of your
component. Often they are injected elsewhere in the DOM. This is
important to keep in mind, since even using high specificity and
shadow-piercing selectors will not target elements that are not direct
children of your component. Global styles are recommended for
targeting such components.

In the specific case of button hover background, I had to use the following code in my styles.css (global stylesheet included via angular-cli or directly linked in index.html). Note that you might have to replace primary with accent or warn depending on the palette type (color="primary" or color="accent" or color="warn") used in the button.

.mat-button.mat-primary .mat-button-focus-overlay {
background-color: transparent;
}

If you don't want every button to be affected, it's better to have a specific class like no-hover-effect as shown below.

.no-hover-effect.mat-button.mat-primary .mat-button-focus-overlay,
.no-hover-effect.mat-button.mat-accent .mat-button-focus-overlay,
.no-hover-effect.mat-button.mat-warn .mat-button-focus-overlay
{
background-color: transparent;
}

For every material button that doesn't need hover-effect, you'd do

  <button mat-button color="primary" class="no-hover-effect">
No Hover Button
</button>

material2: properly changing of mat-mini-fab size and icon size

Alright, I found solution. It's really hard to change inherit properties in angular material 2 components. To do that in my situation I should do as answered here (already plused :D )

So in my code I made following changes in scss:

.my-fab {
width: 20px;
height: 20px;
line-height: 14px;
font-size: 14px;

&::ng-deep .mat-button-wrapper{
line-height: 14px;
padding: 0;

.mat-icon {
font-size: 14px;
padding-right: 4px;
padding-top: 4px;
}
}
}

And now everything looking great. If you know better and proper way to change size of mat-fab-mini and icon inside it - answer here, if it work I'll mark it as correct answer. Otherwise I'll mark my answer as correct after 2 days.

Change Angular 2/4 Material default styles for md-menu

Check if using /deep/ is an option for you.

Component styles normally apply only to the HTML in the component's
own template.

Use the /deep/ selector to force a style down through the child
component tree into all the child component views. The /deep/ selector
works to any depth of nested components, and it applies to both the
view children and content children of the component.

Doc

component.css:

/deep/ .mat-menu-content {
background: skyblue !important;
border-top: solid 1px black;
border-bottom: solid 1px black;
}

/deep/ .mat-menu-item {
padding: 0 0 0 0 !important;
}

demo

How to dynamically set width & height in angular 2

You can do it with decorators. Pass height, width and title model to <app-dialog> like this:

Now in dialog.component.html should be:

<div [@modal] *ngIf="visible" class="dialog" [ngStyle]="{'width': width+'px', 'height': height+'px'}">
<b>{{title}}</b>
<ng-content></ng-content>
<button *ngIf="closable" (click)="close()" aria-label="Close" class="cls">X</button>
</div>
<div *ngIf="visible" class="overlay" (click)="close()"></div>

How apply styles from Material Angular

I'm not sure why you want to generate the buttons dynamically but I would do it something like this

In your template:

<button mat-raised-button (click)="addNewButton()">Add new </button>
<div *ngFor="let btn of buttonsList">
<button mat-raised-button color="primary">
{{btn+1}}
</button>
</div>

In your component:

export class AppComponent  {
buttonsList = [];

addNewButton():void{
const newId = this.buttonsList.length;
this.buttonsList.push(newId);
}
}

You just have to loop through your array and display the buttons. Every time you add a new button, you just have to push a new value to your array and let the framework do the heavy lifting.

Here's the stackblitz demo : https://stackblitz.com/edit/angular-7rfwrx?file=app%2Fapp.component.ts

Hope this helps.

angular material stepper add new step items dynamically on every click

I would use FormArray along with FormGroup

HTML:

<button mat-raised-button (click)="addItem()">
add item
</button>
<form [formGroup]="formGroup">
<mat-horizontal-stepper formArrayName="form">
<mat-step [formGroupName]="i" *ngFor="let customerGroup of formGroup.controls.form.controls; let i = index">
<ng-template matStepLabel>Step {{i + 1}}</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="cont" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
</mat-horizontal-stepper>
</form>

TS Code:

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormControl,FormGroup, Validators,FormArray} from '@angular/forms';

/**
* @title Stepper overview
*/
@Component({
selector: 'stepper-overview-example',
templateUrl: 'stepper-overview-example.html',
styleUrls: ['stepper-overview-example.css'],
})
export class StepperOverviewExample implements OnInit {
isLinear = false;
formGroup : FormGroup;
form: FormArray;
constructor(private _formBuilder: FormBuilder) {
}

ngOnInit() {
this.formGroup = this._formBuilder.group({
form : this._formBuilder.array([this.init()])
})
this.addItem();
}

init(){
return this._formBuilder.group({
cont :new FormControl('', [Validators.required]),
})
}

addItem(){
this.form = this.formGroup.get('form') as FormArray;
this.form.push(this.init());
}
}

Stackblitz



Related Topics



Leave a reply



Submit