ng6-slider
eCommerce
TypeScript
NG6-SLIDER
This project was generated with Angular CLI version 6.2.4.
Development server
Run ng serve slidePlayer for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Code scaffolding
Clone the directory in your local pc and open the command promt in the app folder and follow the steps mention below.
-
Type
npm installwhich will load all the modules for angular. -
Type
ng build sliderwhich will build the module in dist folder. -
Type
npm install dist/sliderwhich will install the module for use in app -
Type
ng serve slidePlayer -oto serve the application slideplayer which is present inside the projects directory -
To make any changes to
sliderModule move to projects/slider/lib/ folder and to rebuild it followstep2and serve the slidePlayer again to see the changes.
Install module to your project
Type npm install ng6-slider –save
Use the code in your application
-
Add the code
<ng6-slider [products]="products" [productsToShow]="3"></ng6-slider>to your components html file - Add the Code
products:any=[
{
name:"p1",
price:2,
image:"https://images-na.ssl-images-amazon.com/images/I/71KjfWD%2ByeL._SL1500_.jpg",
link:"/home",
linkName:"click",
inStock:3,
description:"some description"
},
]
to components ts file as this will provide the details of elemets to be displayed .
Note
The products variable mention above is array of json and it is not mandetory to provide all the fields mention like name,price.
//—————————————————– enjoy coding —————————————————-//