That’s because the color input only accepts three attributes: “primary”, “accent” or “warn”. Hence, you’ll have to style the icons the CSS way: Add a class to style your icon: .white-icon { color: white; } /* Note: If you’re using an SVG icon, you should make the class target the `<svg>` element */ .white-icon svg … Read more
If you are using Angular 10+ and following Awadhoot’s answer, PortalInjector is now deprecated so instead of: new PortalInjector(this.injector, new WeakMap([[SOME_TOKEN, data]])) You now have: Injector.create({ parent: this.injector, providers: [ { provide: SOME_TOKEN, useValue: data } ] })
For those, like me, that also reached this question and already have the lastest @angular 5+. Don’t forget to install Moment.js: npm i moment (as I did )
If you are using a FormGroup, then you should not disable the form in the HTML Template. It will not work if you try to disable in HTML together with FormControl. Instead, it should be done within the FormGroup. Try this: template: ` <mat-form-field [formGroup]=”form”> <input matInput placeholder=”Name” [formControlName]=”formControlName”> </mat-form-field> ` and: ngOnInit() { this.form … Read more
EDIT: This answer was for older Angular versions. See pasek’s answer below for a much more succinct approach in Angular v12+. Angular doesn’t really provide a great, clean way to do this, but it is possible. I think the validators are stored in a service that is injected into the FormBuilder(NG_VALIDATORS), and I’m going to … Read more
The Angular mat-select compares by reference between that object and all the available objects in the mat-select. As a result, it fails to select the items you have set in the category field. Consequently, you have to implement the compare function to compare any of the list items’ attributes as you want, and then pass … Read more
I was playing a bit with the appearance property of mat-form-field and found that if you put a “none” value (or any other unsupported value), you will get clear input. The code: <mat-form-field appearance=”none”> <mat-label>”None” form field</mat-label> <input matInput placeholder=”Placeholder”> </mat-form-field> StackBlitz demo (edited from the official angular demo). The original example can be found … Read more
In your component, set ViewEncapsulation to None and add the styles in your component.css file. Changes in Typescript code: import {Component, ViewEncapsulation} from ‘@angular/core’; @Component({ …. encapsulation: ViewEncapsulation.None }) Component CSS: /* Styles for tab labels */ .mat-tab-label { min-width: 25px !important; padding: 5px; background-color: transparent; color: red; font-weight: 700; } /* Styles for the … Read more
Well, I’m not sure if I understood well your question because, by default the index always starts counting from zero unless you set manually the [selectedIndex] property. Anyway, if you really want to see which tab is selected on initialization you could implement the AfterViewInit interface and do the following: export class AppComponent implements AfterViewInit, … Read more
For passing variables you can grab the instance of the component opened in the dialog, from the MdDialogRef instance returned in the MdDialog.open() method call. dialogRef = this.dialog.open(PizzaDialog, config) dialogRef.componentInstance.<property_name> Modified Pizza from the github material2 docs angular material doc @Component({ selector: ‘pizza-component’, template: ` <button type=”button” (click)=”openDialog()”>Open dialog</button> ` }) export class PizzaComponent { … Read more