nth-cloud / ng-toggle Goto Github PK

When I use ngFor to generate multiple ngx-toggle elements, I can see the toggle elements shrinking from the width of the whole row. It's not breaking anything, but it's a pretty noticeable change, and when I want the toggles to be in the same row as another form element, the page elements shift while the toggles resize.

I want to use the Angular ng-toggle component.

I'm using lazy loading, i'm importing the NgToggleModule in my lazy loading Module. Without the use of [(ngModule)]="cat.enable" the component renders correctly.

dispomap.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DispomapComponent } from './dispomap.component';
import { DispomapSettingsComponent } from './dispomap-settings/dispomap-settings.component';
import { Routes, RouterModule } from '@angular/router';
import { DispmapService } from './Service/dispmap.service';
import { NgToggleModule } from '@nth-cloud/ng-toggle';

const routes: Routes = [
...
  {
      path: 'settings',
      data: {
          title: 'Settings'
      },
      component: DispomapSettingsComponent,
  }
];

@NgModule({
  declarations: [DispomapComponent, DispomapSettingsComponent],
  imports: [
    CommonModule,
    NgToggleModule,
    RouterModule.forChild(routes),
  ],
  providers: [ DispmapService ]
})
export class DispomapModule { }

dispomap-settings.component.ts

import { Component, OnInit } from '@angular/core';
import { DispmapService } from '../Service/dispmap.service';
import { IDispoMapCategoryInfo } from '../Models/IDispoMapCategoryInfo';

@Component({
  selector: 'app-dispomap-settings',
  templateUrl: './dispomap-settings.component.html',
  styleUrls: ['./dispomap-settings.component.scss']
})
export class DispomapSettingsComponent implements OnInit {

  CategoryInfos: IDispoMapCategoryInfo[];
  constructor(private dispomapService: DispmapService) { }

  ngOnInit() {
    this.dispomapService.GetCategories().subscribe(ci => {
      this.CategoryInfos = ci;
    });
  }

}

dispomap-settings.component.html

<div>
  <div class="row" *ngFor="let cat of CategoryInfos">
    <div class="col-2 col-md-1">
        <ng-toggle onColor="primary" offColor="secondary" [(ngModel)]="cat.enabled"></ng-toggle>
      </div>
    <div class="col-6 col-md-4">{{cat.label}}</div>
    <div class="col-2 col-md-1">{{cat.order}}</div>
    <div class="col-2 col-md-1">{{cat.trucks}}</div>
  </div>
</div>

Google Chrome Console Error:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ng-toggle'.
1. If 'ngModel' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("yInfos">
    <div class="col-2 col-md-1">
        <ng-toggle onColor="primary" offColor="secondary" [ERROR ->][(ngModel)]="cat.enabled"></ng-toggle>
      </div>
    <div class="col-6 col-md-4">{{cat.label}}</di"): ng:///DispomapModule/DispomapSettingsComponent.html@3:58
Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ng-toggle'.
1. If 'ngModel' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("yInfos">
    <div class="col-2 col-md-1">
        <ng-toggle onColor="primary" offColor="secondary" [ERROR ->][(ngModel)]="cat.enabled"></ng-toggle>
      </div>
    <div class="col-6 col-md-4">{{cat.label}}</di"): ng:///DispomapModule/DispomapSettingsComponent.html@3:58
    at syntaxError (compiler.js:2430)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158)
    at compiler.js:26101
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101)
    at compiler.js:26011
    at Object.then (compiler.js:2421)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

Bug description:

Not sure if this would be classified as a bug or feature request, but I'm unable to use (click) and preventDefault/stopPropagation as you can with normal UI elements. The function fires, but the toggle is already complete by that point. This would be useful for validation purposes or taking other actions as part of the toggle.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-gp2fyk-huufee

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 9.1.1

ng-bootstrap: 6.0.2

The demo link is broken.

Please remember, the issues forum is NOT for support requests. It is for bugs and feature requests only.
Please read https://github.com/nth-cloud/ng-toggle/blob/master/CONTRIBUTING.md and search
existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.

Bug description:

After updating my projecto to Angular 9 Im getting this error in console.

index-add-edit.component.html:165 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at NgToggle.get container$ [as container$] (ng-toggle.js:456)
at NgToggle.calculateWidth (ng-toggle.js:390)
at NgToggle.ngOnChanges (ng-toggle.js:167)
at checkAndUpdateDirectiveInline (core.js:32900)
at checkAndUpdateNodeInline (core.js:45701)
at checkAndUpdateNode (core.js:45640)
at debugCheckAndUpdateNode (core.js:46663)
at debugCheckDirectivesFn (core.js:46606)
at Object.updateDirectives (index-add-edit.component.html:172)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:46594)

Link to minimally-working StackBlitz that reproduces the issue:

https://angular-prr5xh.stackblitz.io
https://stackblitz.com/edit/angular-prr5xh

Versions of Angular, ng-bootstrap and Bootstrap:

Angular:
9.0.2
ng-bootstrap:

Bootstrap:

can you show example? how to use ngx-toggle with reactive form in ng4 ?

I tried with below code but didn't get value

<ngx-toggle
onColor="primary"
onText="Male"
offColor="secondary"
offText="Female"
[size]="sm"
formControlName="gender"
></ngx-toggle>

Bug description:

When binding to (change) event, nothing happens. It should be triggered when the user toggles the component.
This should be different from (valueChange) event which triggers even when loading the component, which is not what should happen for (change) event.

For example, with a form like this:

<input [(ngModel)]="user.firstName" (change)="onFirstNameChanged($event)" />

<ng-toggle [(ngModel)]="user.admin" (valueChange)="onAdminChanged($event)"></ng-toggle>

In this example, when loading the page with user = {firstName: 'first', admin: true}, onFirstNameChanged will not be fired but onAdminChanged will. Now if we use (change) on ng-toggle instead, it should also not fire unless the user changes the model by interacting with the component.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7.2.2

ng-bootstrap: 4.0.2

Bootstrap: 4.3.1

The documentation suggests that valueChange will be fired when the user toggles the button , Can you share an example with usage of the callback.

I tried using valueChange just like other options of the plugin and catch the event, But nothing happens.

Angular version : 6.0
ngx-toggle version: 2.0.1

Feature description:

As far as I've seen the styling for width is applied in a "style" tag applied to the "toggle-on", "handle" and 'toggle-off' and the rest relies on bootstrap classes.

Would it will be possible to expose an onClass, offClass and handleClass that should be injected after the regular classes set by default?

Those three attributes would apply to the three root elements of the toggle, ng-toggle-on, ng-toggle-handle, ng-toggle-off:

<span class="ng-toggle-container" style="margin-left: 0px; width: 112px;">
    <span class="ng-toggle-on btn btn-success" style="width: 48px;">On</span>
    <span class="ng-toggle-handle btn btn-light">&nbsp;</span>
    <span class="ng-toggle-off btn btn-danger" style="width: 48px;">Off</span>
</span>

So for example something like this:

<ng-toggle
            [(ngModel)]="toggleModel"
            handleClass="custom-handle-class"
            onColor="success"
            onClass="custom-on-class"
            offColor="danger"
            offClass="custom-off-class"
          >

would render to something like:

<span class="ng-toggle-container" style="margin-left: 0px; width: 112px;">
    <span class="ng-toggle-on btn btn-success custom-on-class" style="width: 48px;">On</span>
    <span class="ng-toggle-handle btn btn-light custom-handle-class">&nbsp;</span>
    <span class="ng-toggle-off btn btn-danger custom-off-class" style="width: 48px;">Off</span>
</span>

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7.2.7

ng-bootstrap: 4.0.4

Bootstrap: 4.3.1

Is there a way to skip the initial animation, right after rendering the toggle?

Example:
https://stackblitz.com/edit/angular-gp2fyk
Usually, values are loaded asynchronously, so this quick movement is not desired.

I apologize for asking instead of a problem, but couldn't find another way to ask it.

How to add functionality to prevent the toggler from switching inside the callback to a nickname or change?

For example, throw confirm when trying to switch the toggler, and if the user refused, then do not switch the toggler

When adding the toggle button it has a width of 0

it has something to do with updating the with icw initialize state because removing the following if statement around:
// if (!initialized) {
_this.container$.style.width = ((_this.width * 2) + _this.handleWidth) + 'px';
_this.wrapper$.style.width = (_this.width + _this.handleWidth) + 'px';
// }

gives me a proper button

Feature description:

Sometimes the ng-toggle handle color is much too similar to the background so it becomes confusing for users.
Could the handle colors (hover and non-hover) be customisable as the other colors are?

Installing in an Angular 7.0 project gives the following warnings:

npm WARN [email protected] requires a peer of @angular/common@^6.1.10 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^6.1.10 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/forms@^6.1.10 but none is installed. You must install peer dependencies yourself.

It works with Angular 6, but I get these warnings:

npm WARN [email protected] requires a peer of @angular/core@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/common@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/forms@^5.0.0 but none is installed. You must install peer dependencies yourself.

Is this a plan anytime soon? I am upgrading from Angular 13 to 15 and I use this library in my project.

Is there a way of adding a configuration to make toggle work with 3 steps. Instead of passing from true to false back and forth. Can we pass from true to false / from false to null / null to true. I tried using (valueChanged) and manually setting the model to null but it didn't work. Thank you for your time.

Bug description:

Hello, why onload time the valueChange event always tiggered when value is true?

Upgrading to Angular12 gives warnings on this package (using ng update):

Package "@nth-cloud/ng-toggle" has an incompatible peer dependency to "@angular/forms" (requires "^10.0.0" (extended), would install "12.1.0").

The buttons seems to have glitched styling on Internet Explorer 11, which is severe enough to make the labels unreadable or non-functional. Below I have included a screenshot of the demo page (https://ngx-toggle.github.io/#/components/toggle/examples) for ngx-toggle, taken on IE11.

The width of the labels seem to be too small, and the handle's width is also smaller than it's supposed to be.

On the npm registry package page, the link to the github page points to https://github.com/@nth-cloud/ng-toggle#readme when it should point to https://github.com/nth-cloud/ng-toggle#readme