How to add md switch in angular 4
I want to add md-switch from AngularJS stuff to my angular4 project, but I am 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?
source to share
You are using angular1 lib docs for angular2 module ...
If you already have this , then the repo only imported the required functionality from the stuff into your module, then install the package:
npm install @angular/material
Don't forget to include the component component module in the 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{}
source to share
First of all the angular material is not compatible with angular 4 but uses angular 2 material. And before adding angular material, check this issue:
https://github.com/angular/material2/issues/4137
There is no tracking in angular materials. Even if you are using one module, it will import everything, and it will increase your assembly size, hence lower performance. So I would recommend either using any other library or writing your own custom css.
Some of the materials you can use are as follows:
source to share