followed angular material step by step but form does not look material, why?

Question

I'm angular newbie, I have a new angular 4 app i then followed the step by step at: https://material.angular.io/guide/getting-started to install it.

then I copied the code to my new component from here: https://material.angular.io/components/input/examples

and I see:

https://ibb.co/ihb41G

instead of expected:

https://material.angular.io/components/input/examples

https://ibb.co/bBA8Tw

any ideas what did i do wrong? or what to check to verify it?

src/app/components/inputform/inputform.component.html:

<form class="example-form">
  <md-form-field class="example-full-width">
    <input mdInput placeholder="Company (disabled)" disabled value="Google">
  </md-form-field>

  <table class="example-full-width" cellspacing="0"><tr>
    <td><md-form-field class="example-full-width">
      <input mdInput placeholder="First name">
    </md-form-field></td>
    <td><md-form-field class="example-full-width">
      <input mdInput placeholder="Long Last Name That Will Be Truncated">
    </md-form-field></td>
  </tr></table>

  <p>
    <md-form-field class="example-full-width">
      <textarea mdInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
    </md-form-field>
    <md-form-field class="example-full-width">
      <textarea mdInput placeholder="Address 2"></textarea>
    </md-form-field>
  </p>

  <table class="example-full-width" cellspacing="0"><tr>
    <td><md-form-field class="example-full-width">
      <input mdInput placeholder="City">
    </md-form-field></td>
    <td><md-form-field class="example-full-width">
      <input mdInput placeholder="State">
    </md-form-field></td>
    <td><md-form-field class="example-full-width">
      <input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
      <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
    </md-form-field></td>
  </tr></table>
</form>

src/app/components/inputform/inputform.component.css:

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

src/app/components/inputform/inputform.component.ts:

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

@Component({
  selector: 'app-inputform',
  templateUrl: './inputform.component.html',
  styleUrls: ['./inputform.component.css']
})
export class InputformComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

was running:

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

other files:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

import { AppComponent } from './app.component';
import { InputformComponent } from './components/inputform/inputform.component';

@NgModule({
  declarations: [
    AppComponent,
    InputformComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MdButtonModule, MdCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Quickwebsite</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

src/styles.css:

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

src/app/app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <app-inputform></app-inputform>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

src/app/app.component.ts:

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

import { AppComponent } from './app.component';
import { InputformComponent } from './components/inputform/inputform.component';

@NgModule({
  declarations: [
    AppComponent,
    InputformComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MdButtonModule, MdCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@Faisal I updated in the question all my code, from this code doesn't it mean that I added the material theme? thanks. — Jas

angularrocks.com angularrocks.com · Accepted Answer · 2017-09-28T23:49:14

As form https://material.angular.io/guide/theming seems like you are missing that:

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

Create a folder theme and put the app theme in to file like yourthemename.scss

Import that in to styles.scss like @import '/app/theme/yourthemename';

followed angular material step by step but form does not look material, why?

1 Answers