Menu
problem
mat-slide-toggle is not visible.
I'm trying to implement this example from below url https://material.angular.io/components/autocomplete/examples.
testcomponent.html
<mat-slide-toggle
[checked]="stateCtrl.disabled"
(change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
Disable Input?
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule,Component, ElementRef, ViewChild,Pipe,PipeTransform,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
//import service libraries declare all services used in project here//
import { HeroService } from './hero.service';
import { UserService } from './user.service';
import { AlertService } from './alert.service';
import {AuthenticationService } from './authentication.service';
import { ApiDashboard } from './api-dashboard';
import { ApiDashboardDataService } from './api-dashboard-data.service';
import {FormService} from './form.service';
import {UserRegistrationService} from './user-registration.service';
//services closed//
//import {DataTableModule} from "angular2-datatable";
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import {RouterTestingModule} from '@angular/router/testing';
import { AppRoutingModule } from './app-routing/app-routing.module';
// used to create fake backend
//import { fakeBackendProvider } from './helpers/fake-backend';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { BaseRequestOptions } from '@angular/http';
//import { routing } from '../app-routing';
import { AuthGuard } from './auth.guard';
// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
import { HeroSearchComponent } from './hero-search/hero-search.component';
import { MaterialDashboardComponent } from './material-dashboard/material-dashboard.component';
//import {MatSidenavModule} from '@angular/material';
import { UserComponent } from './user/user.component';
import {Http, Response} from '@angular/http';
import {LoginComponent} from './login/login.component';
import { AlertComponent } from './alert/alert.component';
import { RegisterComponent } from './register/register.component';
//import {MatMenuModule} from '@angular/material';
//component for input fields
//import {MatInputModule} from '@angular/material';
import { HomeComponent } from './home/home.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {CdkTableModule} from '@angular/cdk/table';
import { DataTablesModule } from 'angular-datatables';
//import { MaterialModule,MatAutocompleteModule, MatFormFieldModule } from '@angular/material';
import { MatFormFieldModule } from '@angular/material';
import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
//MatCoreModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
} from '@angular/material';
//import {MenuIconsExample} from './menu-icons-example';
//import {HttpModule} from '@angular/http';
import { ApiDashboardComponent } from './api-dashboard/api-dashboard.component';
import { ApiDashboardformComponent } from './api-dashboardform/api-dashboardform.component';
import { EditApiDashboardComponent } from './edit-api-dashboard/edit-api-dashboard.component';
import { MaterialThemeComponent } from './material-theme/material-theme.component';
import { LoginFosUserandRestBundleComponent } from './login-fos-userand-rest-bundle/login-fos-userand-rest-bundle.component';
import { LoginuserbundleComponent } from './loginuserbundle/loginuserbundle.component';
import { FormGroup, FormBuilder } from '@angular/forms';
import { MaterialTestthemeComponent } from './material-testtheme/material-testtheme.component';
//import {FlashMessagesModule} from 'angular2-flash-messages/module';
//import {Mat2Module} from 'Mat2';
//import {HttpModule} from '@angular/http';
//import {CdkTableModule} from '@angular/cdk';
@NgModule({
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent,
DashboardComponent,
HeroSearchComponent,
MaterialDashboardComponent,
UserComponent,
LoginComponent,
AlertComponent,
RegisterComponent,
HomeComponent,
ApiDashboardComponent,
ApiDashboardformComponent,
EditApiDashboardComponent,
MaterialThemeComponent,
LoginFosUserandRestBundleComponent,
LoginuserbundleComponent,
MaterialTestthemeComponent
//MenuIconsExample
//AppRoutingModule
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterTestingModule,
InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true}), // fake in memory API simulation
// InMemoryWebApiModule.forRoot(InMemoryDataService),
AppRoutingModule,
MatSidenavModule,
MatInputModule,
MatMenuModule,
BrowserAnimationsModule,
MatTableModule,
CdkTableModule,
DataTablesModule,
//MaterialModule,
ReactiveFormsModule,
MatAutocompleteModule,
MatFormFieldModule,
//Mat2Module
],
//exports: [MatSidenavModule,MatInputModule,MatMenuModule],
exports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
//MatCoreModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
//declare your service here
providers: [HeroService,UserService,AlertService,AuthGuard,
AuthenticationService,
UserService,
ApiDashboard,
ApiDashboardDataService,
FormService,
UserRegistrationService,
FormBuilder,
// providers used to create fake backend
// fakeBackendProvider,
MockBackend,
BaseRequestOptions],
bootstrap: [AppComponent]
})
export class AppModule { }
ng version
OS: win32 x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped
@angular/animation: 4.0.0-beta.8
@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.6.7
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.7.1
webpack: 3.10.0
i have tried to load hammer.js from cdn path in index.html
<script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script
i have also
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
Problem
snapshot.
can anyone suggest what im missing though im new angular material .
any suggestion is most welcome.
542
Slide toggle is created using MatSlideToggle Directive. The selector of MatSlideToggle is mat-slide-toggle . To create a slide toggle we use <mat-slide-toggle> element. MatSlideToggle provides input properties such as ariaLabel, ariaLabelledby, checked, color, disableRipple, disabled, id, labelPosition, name, required.
<mat-slide-toggle> is an on/off control that can be toggled via clicking. Basic slide-toggles. link code open_in_new. Slide me! The slide-toggle behaves similarly to a checkbox, though it does not support an indeterminate state like <mat-checkbox> .
<mat-slider> allows for the selection of a value from a range via mouse, touch, or keyboard, similar to <input type="range"> . Basic slider.
In your module definition you forgot to add MatSlideToggleModule (you are importing the file but your app doesn't use it) in the imports section and you need BrowserAnimationsModule:
@NgModule({
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent,
DashboardComponent,
HeroSearchComponent,
MaterialDashboardComponent,
UserComponent,
LoginComponent,
AlertComponent,
RegisterComponent,
HomeComponent,
ApiDashboardComponent,
ApiDashboardformComponent,
EditApiDashboardComponent,
MaterialThemeComponent,
LoginFosUserandRestBundleComponent,
LoginuserbundleComponent,
MaterialTestthemeComponent
//MenuIconsExample
//AppRoutingModule
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterTestingModule,
InMemoryWebApiModule.forRoot(InMemoryDataService, { passThruUnknownUrl: true }), // fake in memory API simulation
// InMemoryWebApiModule.forRoot(InMemoryDataService),
AppRoutingModule,
MatSidenavModule,
MatInputModule,
MatMenuModule,
BrowserAnimationsModule,
MatTableModule,
CdkTableModule,
DataTablesModule,
//MaterialModule,
ReactiveFormsModule,
MatAutocompleteModule,
MatFormFieldModule,
MatSlideToggleModule, // here otherwise it's not possible to use the component mat-slide-toggle defined in this module
BrowserAnimationsModule
],
//exports: [MatSidenavModule,MatInputModule,MatMenuModule],
exports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
//MatCoreModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
//declare your service here
providers: [HeroService, UserService, AlertService, AuthGuard,
AuthenticationService,
UserService,
ApiDashboard,
ApiDashboardDataService,
FormService,
UserRegistrationService,
FormBuilder,
// providers used to create fake backend
// fakeBackendProvider,
MockBackend,
BaseRequestOptions],
bootstrap: [AppComponent]
})
export class AppModule { }
You didn't see any error because you use
schemas: [CUSTOM_ELEMENTS_SCHEMA]
You didn't provide your css but you will also need to import a material theme in your style.(s)css like:
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
You can find a simple example here https://stackblitz.com/edit/angular-eszrpl
127
As on today, I was facing the same issue while using this theme in my angular.json:
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.css"
],
There is something wrong either with my display or the theme itself or something else but the moment I changed the theme to indigo-pink (like below) the slider became visible dramatically without any extra effort:
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
I am not worried about the theme at the moment but thought of sharing as I was looking for a solution all over the places to understand why the slider is not visible. The dependencies in my package.json look like this:
"dependencies": {
"@angular/animations": "~11.2.7",
"@angular/cdk": "^11.2.7",
"@angular/common": "~11.2.7",
"@angular/compiler": "~11.2.7",
"@angular/core": "~11.2.7",
"@angular/forms": "~11.2.7",
"@angular/material": "^11.2.7",
"@angular/platform-browser": "~11.2.7",
"@angular/platform-browser-dynamic": "~11.2.7",
"@angular/router": "~11.2.7",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
