CODEWITHSUNDEEP
angular
chrizonline
chrizonline

Reputation: 4979

How to add md-switch to angular 4

i want to add md-switch from AngularJS Material to my angular4 project, but i'm getting the following error:

Uncaught Error: Template parse errors:
'md-switch' is not a known element:
1. If 'md-switch' is an Angular component, then verify that it is part of this module.
2. If 'md-switch' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message

===============================

UPDATE

test.component.html:

<md-slide-toggle>Slide me!</md-slide-toggle>

test.component.ts:

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

test.module.ts

import { MaterialModule, MdButtonModule, MdSlideToggleModule} from '@angular/material';
import { NgModule } from '@angular/core';
import { TestComponent } from './test.component';

@NgModule({
  declarations: [
    TestComponent
  ],
  imports: [
    MaterialModule, MdSlideToggleModule,
  ],
})
export class TestModule { }

package.json

{
  "name": "web-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.7",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.1.3",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

What am i missing?

Upvotes: 4

Views: 1006

Answers (2)

Lucas
Lucas

Reputation: 10313

You are using the angular1 lib docs for an angular2 module...

If you already have this repo installed just import the desired functionality from material to your module, else install package:

npm install @angular/material

Don´t forget to include the feature component module on your selected module:

test.module.ts:

import {MatSlideToggleModule} from '@angular/material/slide-toggle';

    imports:      [ MatSlideToggleModule,

test.component.html:

<mat-slide-toggle>Slide me!</mat-slide-toggle>

test.component.ts:

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

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
})
export class testComponent{}

Upvotes: 2

Deepak Kumar
Deepak Kumar

Reputation: 1699

First of all angularjs material is not compatible with angular 4 instead use angular material 2. And before adding angular material ,Check this issue:

https://github.com/angular/material2/issues/4137

Treeshaking is not happening in angular material. Even if you use one module it will import everything and it will increase your build size, hence decrease the performance. So, I would recommend to either use any other library or write your own custom css.

Some of the material libraires that you can use are:

Upvotes: 1

Related Questions