I'm currently developing a straightforward application focused on products. Essentially, when a user selects a product, it should be transferred to another component responsible for holding that specific product.
It's important to note that a product is always chosen individually - I never send a list of products, only one item at a time!
So, whenever I click on any of the products displayed in the center of the screen (Product food 1, Product food 2, Product food 3), it needs to be sent to the corresponding section on the right side of the screen, which is handled by a separate component.
This is how my middle component is structured:
<div *ngFor="let product of products;" class="product-holder">
<div id="product.id" class="product" [style.background]="'url('+ product.imgUrl +')'">
<p class="product-price">{{product.mpc | number}}</p>
<p class="product-title">{{product.title}}</p>
</div>
</div>
Here is the associated TypeScript code:
@Component({
selector: 'app-products',
templateUrl: './app-products.component.html',
styleUrls: ['./app-products.component.css']
})
export class ProductsComponent implements OnInit {
products: Article[];
constructor(private _sharedService: SharedService) { }
ngOnInit() {
this._sharedService.getEventSubject().subscribe((param: any) => {
if (param !== undefined) {
this.theTargetMethod(param);
}
});
}
theTargetMethod(param) {
// Populating the middle screen with the selected products
this.products = param;
}
}
Next up is the right component, where the received product should be displayed:
<div class="order-article">
<div class="order-img"></div>
<div class="order-title">
<p>HERE I SHOULD WRITE ARTICLE TITLE</p>
</div>
<div class="order-quantity pull-right">
<span class="order-quantity-number">ARTICLE QUANTITY</span>
</div>
</div>
export class ReceiptItemComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
The challenge lies in making the 'right' component receive the clicked product from the middle section. It involves using @Input and @Output decorators along with services. Considering we're dealing with individual items, @input and @output seem like the appropriate solution here.
Looking for practical guidance on implementing this feature. Any assistance would be greatly appreciated.
Thanks
AFTER fjc help:
<div *ngFor="let product of products;" class="product-holder" (click)="addReceiptItem(article)">
<div id="product.id" class="product" [style.background]="'url('+ product.imgUrl +')'">
<p class="product-price">{{product.mpc | number}}</p>
<p class="product-title">{{product.title}}</p>
</div>
</div>
As demonstrated above:
1.) Added addReceiptItem method
2.) This method accepts the clicked product:
addReceiptItem(receiptItem: Product) {
this._sharedService.addReceiptItem(receiptItem);
}
3.)Injected service '_sharedService' and created method there called 'addReceiptItem'
4.)Incorporated a BehaviorSubject in the service:
private receiptItem = new BehaviorSubject<any>(undefined);4.)The method inside the service functions as follows:
addReceiptItem(receiptItems: Product) {
this.arr1.push(receiptItems);
this.receiptItem.next(this.arr1);
}
This method adds the clicked items to an array that will eventually be handed over to a component responsible for displaying the products
4.11) Additionally, implemented a method for retrieving data which returns a BehaviorSubject:
getReceiptItem(): BehaviorSubject<any> {
return this.receiptItem;
}
5.)Made modifications to the components displaying products, having an initially empty typescript file, now looking like this:
export class ReceiptItemComponent implements OnInit {
constructor(private _sharedService: SharedService) { }
receiptItems: Product[];
ngOnInit() {
this._sharedService.getReceiptItem().subscribe(products => this.receiptItems = products);
}
}
All that’s left to do now is find a way to clean up or destroy unnecessary elements?