Angular Wrapper for Tiny Slider (with SSR !)

A simple angular wrapper for tiny slider. This project is a copy of this package because i need this wrapper up to date, and support SSR.

Getting Started

Link

- github repository
- my twitter
- tiny slider examples

Install

``sh
npm i ngx-simple-countdown
`

Important ! To compile we need to add this line in your tsconfig.json, because there is a bug inside the tiny slider librairy

`json
"compilerOptions": {
...
"skipLibCheck": true <----
}
`

Import in your angular module (or feature module)

##### app.module.ts

`ts
import { NgxWrapperTinySliderModule } from 'ngx-wrapper-tiny-slider';

@NgModule({
imports: [NgxWrapperTinySliderModule]
})
export class AppModule {}
`

Use the wrapper in your component

##### app.component.html

`html







prev
next
`

##### app.component.ts

`ts
import { TinySliderInstance, TinySliderSettings } from 'tiny-slider';

export class AppComponent implements OnInit {
// GET SLIDER INSTANCE HERE
@ViewChild('tinySlider', { static: false }) tinySlider: TinySliderInstance;
// ADD THE SLIDER CONFIG HERE (show tiny slider documentation for more)
public tinySliderConfig: TinySliderSettings = {
gutter: 20,
items: 1,
mouseDrag: true
};

constructor() {}

ngOnInit() {}

// USE THE INSTANCE OF THE SLIDER TO UPDATE SLIDER
public goTo(foo: number | 'next' | 'prev' | 'first' | 'last'): void {
this.tinySlider.goTo(foo);
}
}
`

Use the wrapper with \*ngFor

First add [initManually]="true" in the component properties

`html
#tinySlider
[config]="tinySliderConfig"
[initManually]="true"
>
`

when this property is active, you have to initialize the slider yourself. So add this method in your ngAfterViewInit (or where do you need) :

`ts
ngAfterViewInit(): void {
this.tinySlider.initSlider();
}
``