0

Recently I started working with Angular, and I needed to create a multi-step form, first of all it was a mess to install it, but at the end there it is, but when I use it on my component it doesn,t have style at all, I searched in a lot of sites and videos, but everyone does the same I do. Any idea what is the problem?

This are my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DrawingsComponent } from './drawings/drawings.component';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule} from '@angular/forms';
import { MatStepperModule } from '@angular/material/stepper';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatPseudoCheckboxModule } from '@angular/material/core';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DrawingsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    MatStepperModule,
    MatIconModule,
    MatButtonModule,
    MatPseudoCheckboxModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is my example:

<mat-horizontal-stepper>
  <mat-step label="Step 1">
    Content 1
  </mat-step>
  <mat-step label="Step 1">
    Content 2
  </mat-step>
</mat-horizontal-stepper>

Here is how it should look like

This is how it looks

Sean Bright
  • 118,630
  • 17
  • 138
  • 146
Javier Aranda
  • 33
  • 13
  • Check if all the stylesheets are properly referenced in the index.html file if you are doing this manually. You can use ng add @angular/material to add ng material to existing angular project. Also checkout articles like this to find what is missing. https://robferguson.org/blog/2018/11/05/getting-started-with-angular-material/ – Krishna Veeramachaneni Feb 18 '20 at 18:35
  • Can you post the whole `component.ts` file? With those information is really difficult to say what is wrong with your code. Can you create a StackBlitz, for example? – Ferie Feb 18 '20 at 18:38
  • the ng add @angular/material worked, thank you very much, I know it was kinda dumb but is my first time working with it. Thanks both of you! – Javier Aranda Feb 18 '20 at 18:48

1 Answers1

0

Did you choose a theme when you have installed angular material? Please take a look here

BELLIL
  • 739
  • 10
  • 23