CODEWITHSUNDEEP
angular
DaveC426913
DaveC426913

Reputation: 2046

installing and implementing Angular 2 components

When looking for a plugin to fill a need on my angular 2 application, my primary consideration for choosing is more often than not 'can I actually decipher how to install and use it'. If not, I'm on to the next one, which hopefully uses smaller words and larger examples.

I'm trying to implement a toggle switch on my page (not an 'on/off' toggle, but toggling between two equivalent states: 'Show Recent' and 'Show All').

This is one I'm looking at now. following the install instructions: https://github.com/JulioWar/jw-bootstrap-switch-ng2

1] I've installed it using yarn (same as npm, really.)

2] Now I'm importing the CSS. (I'm not exactly sure why, even though I've installed it, I still need to add a link to the CDN. What's the point of installing if I just link to it anyway?)

I'm pretty sure I can bypass the section on system.js.config.js since we use webpack. so:

3] It says: You can then use the directive in your templates:

@Component({
  selector: 'app',
  template: `
  <bSwitch
          [switch-base-class]="baseClass"
          [switch-wrapper-class]="wrapperClass"
          [switch-label-width]="labelWidth"
          [switch-label-text]="labelText"
          [switch-off-text]="offText"
          [switch-on-text]="onText"
          [switch-on-color]="color"
          [switch-off-color]="offColor"
          [switch-size]="size"
          [switch-disabled]="disabled"
          [switch-readonly]="readonly"
          [switch-animate]="animate"
          [(ngModel)]="state"
          [switch-inverse]="inverse"
          [switch-handle-width]="handleWidth"
          [switch-base-class]="'bootstrap-switch'"
          (onChangeState)="onChange($event)">
  </bSwitch>
  `
})
export class AppComponent {}

I have no idea what I'm supposed to do with this. I see a somewhat similar block of code in my app.components.ts file:

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

But I don't know whether this new component gets appended outside the existing @component or interleaved within it.

Upvotes: 0

Views: 634

Answers (2)

Alexander Hernandez
Alexander Hernandez

Reputation: 1

In the version of angular 13.3 at the moment of try to import the

imports: [BrowserModule, JWBootstrapSwitchModule],

Im getting this issue

'JwBootstrapSwitchNg2Module' does not appear to be an NgModule class.(-996002)

jw-bootstrap-switch-ng2.module.d.ts(1, 22): This likely means that the library (jw-bootstrap-switch-ng2) which declares JwBootstrapSwitchNg2Module is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Upvotes: 0

LT56
LT56

Reputation: 187

It tells you on the page exactly what to do. Add JWBootstrapSwitchModule to your list of modules imports:

imports: [BrowserModule, JWBootstrapSwitchModule],

Once its imported into your module you can use it inside any component template under the section entited declarations inside the module that contains the import above.

<bSwitch [attributes]></bswitch>

Upvotes: 1

Related Questions