Angular 4 Material stepper tags are not defined

Question

I'm trying to use Angular Material stepper, gone through the documentation but when i paste the HTML Material stepper tag inside my Angular app it tells me that it's not a known element.

HTML:

<mat-horizontal-stepper [linear]="isLinear" 
#stepper="matHorizontalStepper">
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" 
formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" 
required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>

Component TS:

import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MatStepperIntl, MatStepperModule} from '@angular/material';

export class AddSchoolComponent implements OnInit {


isLinear = false;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;

constructor(
          private _formBuilder: FormBuilder,
          ) {}

ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
  firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
  secondCtrl: ['', Validators.required]
});
}
}

App TS:

import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MatStepperModule} from '@angular/material';
import {MatStepperIntl} from '@angular/material';
import {CdkTableModule} from '@angular/cdk/table';

imports: [
MatStepperModule,
NoopAnimationsModule,
BrowserAnimationsModule,
MatButtonModule, MatCheckboxModule,],
providers: [ MatStepperModule,
MatStepperIntl,
 {provide: MatStepperIntl, useClass: MyIntl},
],

Tells me in app module cannot find name MyIntl.

Error message in console:

'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. ("formGroup]="firstFormGroup">

I need some help knowing why app module cannot identify MyIntl class and why stepper tags are not known in my HTML.

the link i followed instructions from: This link

Documentation link

Answer 1

The issue was that i used Angular bootstrap with Angular material, they doesn't work with each other, this is why it never worked with me. I hope that helps anyone.

Answer 2

Please take note that modules (such as MatButtonModule, BrowserModule, etc.) should be imported in your app's module and not your component(s).

Please read the Angular documentation before getting started with Angular. You can also check out the API tab for the import statement that you need (and the module that you need in order for the Material component you want to use to work)

(P.S. I recommend that you use a feature module for Material components.)

material.module.ts:

import { NgModule } from '@angular/core';
import { MatStepperModule } from '@angular/material/stepper';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatStepperModule
  ]
})
export class MaterialModule {}

app.module.ts:

import { MaterialModule } from './material.module';
import { NgModule } from '@angular/core';
// etc.

@NgModule({
  imports: [
    MaterialModule,
    // etc.
  ]
})
export class AppModule { }

Answer 3

import this all and check
import { MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatPaginatorModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatDividerModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSortModule, MatSlideToggleModule, MatSnackBarModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatFormFieldModule, MatExpansionModule, MatStepperModule, MatDatepicker,MatNativeDateModule } from '@angular/material';

@NgModule({
  exports: [
    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatSelectModule,
    MatSlideToggleModule,
    MatSliderModule,
    MatSidenavModule,
    MatSnackBarModule,
    MatStepperModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule,
    MatDatepickerModule,
    MatNativeDateModule
  ]
})

Answer 4

You have to import { MatFormFieldModule } from '@angular/material'; import { MatInputModule } from '@angular/material'; in app.ts