angular-material2

Is it possible to reset (or just jump to the first step) inside of a stepper ? It is not documented in the docs, but is it possible to do so? It is stated in the docs that the stepper is built on "CDK Stepper" ( link ?), but I can't find any examples which lead me to my goal. Ben jamin Ok, it seems I found a solution (but it is not stated anywhere on the API). Add a reference to the stepper, then add ViewChild with the reference in your component typescript file. Create a method to change the index of the stepper. HTML: <mat-horizontal-stepper [linear]="true" #stepper> <!-- Content here --> <

Problem Statment I am learning Angular 4 and I have stumble upon a code where @Inject is being used in a constructor and I am not able to figure out why... Code and Source I am using Angular 4 Material Code Source: https://material.angular.io/components/dialog/overview In the code, they are injecting MAT_DIALOG_DATA constructor(public dialogRef: MatDialogRef<DialogOverviewExampleDialog>, @Inject(MAT_DIALOG_DATA) public data: any ) { } Can anyone please elaborate what does it mean and when/where should we do this? Rahul Singh @Inject() is a manual mechanism for letting Angular know that a

I'm trying to use <mat-form-field in an Angular project using Material2 but I've hit a wall. Getting the error message below. Uncaught Error: Template parse errors: 'mat-form-field' is not a known element: 1. If 'mat-form-field' is an Angular component, then verify that it is part of this module. 2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-form-field> <input matInput placeholder="Simple placeholder" required> </mat-form-field>"): ng:///MaterialModule/SearchComponent.html@0:0

We are developing a corporate component library which should provide Material Designed Angular Components. So the users of this library are not supposed to use e.g. Angular Material directly but rather include some component like " custom-tabs ". Using the components of MatTabModule directly works like a charm, whereas when using our custom components the projected content does not show up. Usage looks very similar to the Angular Material API: <custom-tabs> <custom-tab [label]="labelA">Content A</custom-tab> <custom-tab [label]="labelB">Content B</custom-tab> <custom-tab [label]="labelC"

When I select a date I see the correct date in the field but, when I save, the datepicker send the day before the date I have selected ( 3 hours offset ) i am using angular reactive form and MatMomentDateModule for date picker . the problem is related to timezones but i just want to save the same date that the user enter to database . Code repreduced here : https://stackblitz.com/edit/angular-material-moment-adapter-example-kdk9nk?file=app%2Fapp.module.ts issue related to this on githup : https://github.com/angular/material2/issues/7167 Any help is appreciated , and i think a lot of developers

Is it possible to build an npm module that uses Angular Material and allows the components it defines to be styled by the consuming app's custom theme? As an example, say I create an npm module that includes a component with the following template: <button mat-raised-button color="accent">Click me!</button> Is it possible to import this component into two different apps, each of which defines a custom Angular Material theme , and have the button take on the "accent" color of the current app's theme? Currently, I'm using ng-packagr to build Angular-friendly npm modules. However, as far as I can

I want to use the icons from https://materialdesignicons.com/ in my angular 4 project. The instructions on the website are only covering how to include it in Angular 1.x ( https://materialdesignicons.com/getting-started ) How can I include the Material design icons so I can use them like <md-icon svgIcon="source"></md-icon> using Angular Material and ng serve ? NOTE: I already Included the google material icons which are different! Simply follow these steps: Download mdi.svg from here under the Angular Material section and place it in your assets folder, which should be located at (from your

I come to you for talking about a problem with angular material. In fact, I think it's an issue, but I prefer looking for a misunterstanding first. The first thing about my problem is the context, i try to do a simple form containing two inputs : a password and its' confirmation. user-form.component.ts this.newUserForm = this.fb.group({ type: ['', Validators.required], firstname: ['', Validators.required], lastname: ['', Validators.required], login: ['', Validators.required], matchingPasswordsForm: this.fb.group( { password1: ['', Validators.required], password2: ['', Validators.required], },