I am working in an Angular4 application , In this I need to generate products in snippet carousel dynamically.Currently I gave 6 (3+3) static products ,I want to make this as dynamic process.
I am receiving the product data as a Json response based on the Json data I want to generate products in slider.
get_New_Products(){
this.productServiceURL = `http://localhost:abc/api/data/Get_Product`;
return this.http.get(this.productServiceURL);
}
This is Component File
ngOnInit() {
this.CartdataService.get_New_Products()
.subscribe(
data => { this.productData = data }
);
}
This is my HTML code .
<div class="col-sm-9">
<section class="container">
<div class="row">
<div class="col-sm-1">
<i class="fa fa-user" style="font-size:25px"></i>
</div>
<div class="col-sm-9">
<h5>Popular Products</h5>
</div>
</div>
</section>
<hr>
<section class="carousel slide" id="myCarousel">
<div class="container">
<div class="row">
<div class="col-sm-12 text-right mb-4">
<a class="btn btn-outline-secondary carousel-control left" href="#myCarousel" data-slide="prev" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-outline-secondary carousel-control right" href="#myCarousel" data-slide="next" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img class="img-fluid" src="assets/Images/Popular_Products/iPhone1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" src="assets/Images/Popular_Products/iPhone2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<input #Pname1 type="hidden" value="id">
<span>iPhone</span>
<br>
<br>
<span>3433 $ </span>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img class="img-fluid" src="assets/Images/Popular_Products/indianSpices1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname)" class="img-fluid two" src="assets/Images/Popular_Products/indianSpices2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<input #Pname type="hidden" value="id">
<span>Indian Spices</span>
<br>
<br>
<span>343 $ </span>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img class="img-fluid" src="assets/Images/Popular_Products/6.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span>Home Appliances</span>
<br>
<br>
<span >4500 $</span>
</div>
</div>
</div>
</div>
</div>
<div class="row row-equal carousel-item m-t-0">
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img class="img-fluid" src="assets/Images/Popular_Products/8.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/9.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Bicycles
<br>
<br>
2329 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img class="img-fluid" src="assets/Images/Popular_Products/5.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/12.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Electronic Items
<br>
<br>
8333 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img class="img-fluid" src="assets/Images/Popular_Products/2.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/7.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Natural Oils
<br>
<br>
5435 $
</div>
</div>
</div>
</div>
</div>
</div>
</section>
In this when I place a mouse on a product image that will show another image ,and I have a onClick function which will navigate the user to product details page .In product details page I need to show all the details of product for that I am fetching the product ID when the user clicked on the product.
For that I have a hidden text box ,were I bind the product ID ,when the user clicked on the product I need to fetch the Id from the hidden text box and pass it to the API.
Here I have applied the onclick and hidden text box in first two slides only.
Currently sliding is working fine ,I need to generate the sliders dynamically with hidden ID and onClick functionality.
This is my css.
/* equal card height */
.row-equal > div[class*='col-'] {
display: flex;
flex: 1 0 auto;
}
.row-equal .card {
width: 100%;
}
/* ensure equal card height inside carousel */
.carousel-inner>.row-equal.active,
.carousel-inner>.row-equal.next,
.carousel-inner>.row-equal.prev {
display: flex;
}
/* prevent flicker during transition */
.carousel-inner>.row-equal.active.left,
.carousel-inner>.row-equal.active.right {
opacity: 0.5;
display: flex;
}
/* control image height */
.card-img-top-250 {
max-height: 250px;
overflow:hidden;
}
.card-header{color:dodgerblue}
.modal-backdrop.show {
opacity:0;
}
.one {
width: 231px;
height: 410px;
position: relative;
display: inline-block;
}
.one .two {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.one:hover .two {
display: inline;
}
.text-muted {
color: #fff!important;
}
.card-footer {
padding: .75rem 1.25rem;
background-color:#343A40;
border-top: 1px solid #343A40;
}
Script for button click
<script>
$('a[data-slide="prev"]').click(function() {$('#myCarousel').carousel('prev');});
$('a[data-slide="next"]').click(function() {$('#myCarousel').carousel('next');});
</script>
<script>
$('a[data-slide="prev"]').click(function() {$('#myCarousel1').carousel('prev');});
$('a[data-slide="next"]').click(function() {$('#myCarousel1').carousel('next');});
</script>
I have tried ,But it simply generates the single box.
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img *ngFor = "let productImage of PRODUCT_IMAGE; let i = index" class="img-fluid" [src]="productImage['PRODUCT_IMAGE']" alt="'img' + i">
<img *ngFor = "let productImageOnhover of PRODUCT_IMAGE_ONHOVER; let j = index" routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" [src]="productImageOnhover['PRODUCT_IMAGE_ONHOVER']" alt="'img' + j">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<input *ngFor = "let id of PRODUCT_ID; let k = index" type="hidden" [value]="id['PRODUCT_ID']">
<span *ngFor = "let productName of PRODUCT_NAME" #Pname1>{{productName['PRODUCT_NAME']}}</span>
<br>
<br>
<span *ngFor = "let productPrice of PRODUCT_PRICE" >{{productPrice['PRODUCT_PRICE']}}</span>
</div>
</div>
</div>
Thanks.
