Linked Questions

Popular Questions

mat tab style seems to not be imported properly

Asked by At

I am trying to add mat-tab correctly into my project, but it seems like mat tab is not imported properly or something like that. Because not the complete style of the mat-tab seem to be imported

TS code-block

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-code-block',
  templateUrl: './code-block.component.html',
  styleUrls: ['./code-block.component.scss']
})

export class CodeBlockComponent {
  @Input() htmlContent: any;
  @Input() scssContent: any;
  @Input() typescriptContent: any;

  constructor() {
  }

}

HTML code-block

<mat-tab-group>
  <mat-tab label="HTML">Content 1</mat-tab>
  <mat-tab label="SCSS">Content 2</mat-tab>
  <mat-tab label="Typescript">Content 3</mat-tab>
</mat-tab-group>

app.module.ts (without the imports above ofc)

@NgModule({
  declarations: [
    AppComponent,
    CodeBlockComponent
  ],
  imports: [
    AppRoutingModule,
    AppMaterialModule,
    BrowserModule,
    FlexLayoutModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  entryComponents: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Result :

enter image description here

Instead of :

enter image description here

Related Questions