I am very new to angular ,I am trying to add product to my cart on button click the products are generated dynamically this is my component.html
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<a href="#" class="card clickable">
<div class="card-img">
<img src="">
</div>
<div class="card-block">
<h5>product1</h5>
<h5>aweeee112ddddd</h5>
<h5>1</h5>
<input type="hidden" name="" value="aweeee112ddddd" id="" #productid>
<p class="card-text">
<button class="btn btn-outline" (click)="addtocart(this.productid)">Addtocart</button>
</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<a href="#" class="card clickable">
<div class="card-img">
<img src="">
</div>
<div class="card-block">
<p class="card-text">
<input type="hidden" name="" value="vvvv112ddddd" id="" #productid>
<input type="hidden" name="" value="product1" id="" #productname>
<button class="btn btn-outline" (click)="addtocart(this.productid)">Addtocart</button>
</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<a href="#" class="card clickable">
<div class="card-img">
<img src="">
</div>
<div class="card-block">
<input type="hidden" name="" value="vppp112ddddd" id="" #productid>
<input type="hidden" name="" value="product2" id="" #productname>
<p class="card-text">
<button class="btn btn-outline" (click)="addtocart()">Addtocart</button>
</p>
</div>
</a>
</div>
</div>
And this is my component.ts
export class Products {
addtocart(item1,item2,item3){
alert(item.value);
//alert("item added");
this.cartservice.additems(item1,item2,item3);
return false;
}
constructor(public cartservice:CartService){
}}
I want to pass my hidden fields value to component.ts ,the products will be displayed dynamically ,from database any help will be really appreciated
Although you can use ngModel, IMO it is better to use form controls. You'll get all power of the rxjs (via valueChanges), at least. To perform that, you should:
ReactiveFormsModule
to your host module formCotrol
directive to input
- eg public myControl = new FormControl()
Then work with it as described in docs
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.