Угловой материал HTML выглядит смешно, как сделать это правильно

Question

Я изучаю Angular, и теперь html-компонент выглядит забавно.Это должен быть англоязычный материал, но я что-то пропустил в коде, который мне кажется!

Это мой search-books.component.html

<mat-card>
  <mat-card-header><mat-card-title>New Contact</mat-card-title></mat-card-header>
  <form [formGroup]="newContact" class="form-container">

    <mat-form-field>
      <input type="text" matInput placeholder="Name" formControlName="name">
      <mat-error *ngIf="formControlName.hasError('required')">
        Name is <strong>required</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-select placeholder="Type" formControlName="type">
        <mat-option [value]="1">
          Work
        </mat-option>
        <mat-option [value]="2">
          Cellphone
        </mat-option>
        <mat-option [value]="3">
          Home
        </mat-option>
      </mat-select>
      <mat-error *ngIf="formControlName.hasError('required')">
        Type is <strong>required</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <input type="tel" matInput placeholder="Number" formControlName="number">
      <mat-error *ngIf="formControlName.hasError('required')">
        Number is <strong>required</strong>
      </mat-error>
    </mat-form-field>

    <button mat-raised-button class="submitForm" (click)="addContact()">Save</button>
  </form>
</mat-card>
<button mat-raised-button (click)="goBack()" class="backButton" title="Go Back"><i class="material-icons">chevron_left</i>Back</button>

Вот как это выглядит:

Вот как я хочу, чтобы это выглядело:

Answer 1

Возможно, вы пропустили экспорт модуля материала или не добавили в приложение тему материала по умолчанию

Чтобы создать приложение простого материала, используйтекоманды ниже.

ng add @angular/material

 ng generate @angular/material:materialNav --name myNav
 ng generate @angular/material:materialDashboard --name myDashboard
 ng generate @angular/material:materialTable -- name myTable

Например, если вы используете первую команду для создания нового компонента myNav, вы должны увидеть следующий вывод в командной строке:

CREATE src/app/my-nav/my-nav.component.css (110 bytes)
CREATE src/app/my-nav/my-nav.component.html (945 bytes)
CREATE src/app/my-nav/my-nav.component.spec.ts (605 bytes)
CREATE src/app/my-nav/my-nav.component.ts (481 bytes)
UPDATE src/app/app.module.ts (795 bytes)

Чтобы сделатьон виден пользователю, удалите содержимое по умолчанию из файла app.component.html и просто вставьте следующий элемент:

 <my-nav></my-nav>

Пожалуйста, следуйте этому блогу