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 install
which will load all the modules for angular. -
Type
ng build slider
which will build the module in dist folder. -
Type
npm install dist/slider
which will install the module for use in app -
Type
ng serve slidePlayer -o
to serve the application slideplayer which is present inside the projects directory -
To make any changes to
slider
Module move to projects/slider/lib/ folder and to rebuild it followstep2
and 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 —————————————————-//