CODEWITHSUNDEEP
angularvisual-studioangular-material
Tord Larsen
Tord Larsen

Reputation: 2836

Angular material html looks funny, how to render this correct

I learn Angular and now the Component html look funny. This should be a Angual material but I missed something in the code I think!

This is my 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>

This is what it looks like:

enter image description here

This is what I want it to look like:

enter image description here

Upvotes: 1

Views: 320

Answers (1)

RajuPedda
RajuPedda

Reputation: 3379

It seems, you might have missed the export of your material module or you haven't added any default theme of material in the application

To create simple material app, please use below commands.

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

E.g. if you use the first command to generate a new myNav component you should be able to see the following output on the command line:

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)

To make it visible to the user delete the default content of file app.component.html and just insert the following element:

 <my-nav></my-nav>

Please follow this blog

Upvotes: 2

Related Questions