Error implementing bootstrap switch in angular 5

Question

I try to implement Angular switch into Angular 5 Application, so I install packages via npm.

Then in app.module I import BrowsersAnimation Module as:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ThemeComponent } from "./theme/theme.component";
import { LayoutModule } from "./theme/layouts/layout.module";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { ScriptLoaderService } from "./_services/script-loader.service";
import { ThemeRoutingModule } from "./theme/theme-routing.module";
import { AuthModule } from "./auth/auth.module";
import { ToastrModule } from "ngx-toastr";
import { UsuariosComponent } from "./theme/pages/default/categorias/usuarios/usuarios.component";

import { MatTableModule } from "@angular/material";
import { HttpClientModule } from "@angular/common/http";
import { UsuariosService } from "./_services/usuarios.service";

@NgModule({
  declarations: [ThemeComponent, AppComponent, UsuariosComponent],
  imports: [
    LayoutModule,
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    ThemeRoutingModule,
    AuthModule,
    ToastrModule.forRoot(),
    MatTableModule,
    HttpClientModule
  ],
  providers: [ScriptLoaderService, UsuariosService],
  bootstrap: [AppComponent]
})
export class AppModule {}

then into usuarios.module.ts I import bootstrap switch:

  import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule, Routes } from "@angular/router";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { DefaultComponent } from "../../default.component";
import { LayoutModule } from "../../../../layouts/layout.module";
import { DataTablesModule } from "angular-datatables";
import { BootstrapSwitchModule } from "angular2-bootstrap-switch";
// import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatPaginatorModule,
  MatSortModule,
  MatPaginatorIntl
} from "@angular/material";
// import { MatIconModule } from "@angular/material";
import { HttpClientModule } from "@angular/common/http";

import { UsuariosComponent } from "./usuarios.component";
import { UsuariosService } from "../../../../../_services/usuarios.service";

import { getSpanishPaginatorIntl } from "../lenguaje-paginador";

// This Module's Components
const routes: Routes = [
  {
    path: "",
    component: DefaultComponent,
    children: [
      {
        path: "",
        component: UsuariosComponent
      }
    ]
  }
];

@NgModule({
  exports: [
    // Material
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSlideToggleModule,
    MatSliderModule,
    MatSnackBarModule,
    MatStepperModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatSortModule
  ],

  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    LayoutModule,
    NgbModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatProgressSpinnerModule,
    HttpClientModule,
    BootstrapSwitchModule.forRoot()
  ],
  providers: [
    UsuariosService,
    { provide: MatPaginatorIntl, useValue: getSpanishPaginatorIntl() }
  ],
  declarations: [UsuariosComponent]
})
export class UsuariosModule {}

and in usuarios.component I call html template as:

 import {
  Component,
  Input,
  OnInit,
  ViewEncapsulation,
  ViewChild,
  ElementRef
} from "@angular/core";
import { ModalDismissReasons, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
import { ScriptLoaderService } from "../../../../../_services/script-loader.service";
import { ToastrService } from "ngx-toastr";

import { UsuariosService } from "../../../../../_services/usuarios.service";
import { Observable } from "rxjs/Observable";
import {
  DataSource,
  CollectionViewer,
  SelectionModel
} from "@angular/cdk/collections";
import { User } from "../../../../../_models/user.model";
import { BehaviorSubject } from "rxjs";
import {
  MatSort,
  MatSortable,
  MatTableDataSource,
  MatPaginator,
  MatPaginatorIntl
} from "@angular/material";
import { BootstrapSwitchModule } from "angular2-bootstrap-switch";

// import { MatIconRegistry } from "@angular/material";

@Component({
  selector: "usuarios",
  templateUrl: "./usuarios.component.html",
  encapsulation: ViewEncapsulation.None
})
export class UsuariosComponent {
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild("filter") filter: ElementRef;
  @ViewChild(MatPaginator) paginator: MatPaginator;



  // private loadingSubject = new BehaviorSubject<boolean>(false);
  // public loading$ = this.loadingSubject.asObservable();

  // dataSource = new UserDataSource(this.UsuariosService);
  selection = new SelectionModel<string>(true, []);
  dataSource;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  displayedColumns = [
    "id",
    "nombre",
    "apellido",
    "email",
    "perfil",
    "ultimoLogin",
    "activo",
    "action"
  ];
  // private lessonsSubject = new BehaviorSubject<Lesson[]>([]);

  constructor(
    private _script: ScriptLoaderService,
    private toastr: ToastrService,
    private UsuariosService: UsuariosService
  ) {}

  ngOnInit() {

    this.UsuariosService.getUser().subscribe(results => {
      if (!results) {
        return;
      }
      this.dataSource = new MatTableDataSource(results);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    });
  }

  ngAfterViewInit() {
    this._script.loadScripts("usuarios", [
      "assets/app/base/usuarios/get-usuarios.js"
    ]);
  }
}

As you can see I use usuarios.component.html so in that file I place switch like:

<switch [status]="value" [onText]="si" [offText]="no" [onColor]="onColor" [offColor]="offColor" [size]="size" [disabled]="disabled"
                (statusChange)="onFlagChange($event)"></switch>

but it returns all identifiers are not defined for example:

Identifier 'yes' is not defined. The component declaration, template variable declarations, and element references do not contain such a member

Image

Some one knows what am I doing wrong?

Answer 1

You need to define those attributes in the component! Otherwise, they cannot be used on the template.

@Component({
  selector: "usuarios",
  templateUrl: "./usuarios.component.html",
  encapsulation: ViewEncapsulation.None
})

export class UsuariosComponent {
    public yes: boolean = false;
    public no: boolean = false;
    public green: string = 'green';
    public gray: string = 'gray';
    public disabled: boolean = false;
}