angular - mat-slide-toggle is not visible

2020-04-18 06:43发布

站内文章 / Angular
58 0 0

问题:

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

  • cannot view slide toggle in front end.

snapshot.

  • can anyone suggest what im missing though im new angular material .

  • any suggestion is most welcome.

回答1:

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



标签： angular typescript angular-material
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~