Monday, May 20, 2024
AngularAngular 16WoocommerceWordpress

How to show WooCommerce products into Angular 16 application?

How to show WooCommerce products into Angular 16 application?

Hello to all, welcome to In this post, I will tell you, How to show WooCommerce products into Angular 16 application?

Guys in this working demo getting wordpress + woocommerce products data via rest api and showing inside my angular 16 application.

Live demo

Guys if you are new in Angular, WordPress or in WooCommerce then please check the below links for some good tutorials:

  1. WooCommerce Hooks
  2. WordPress Tricks
  3. WordPress Hooks
  4. Angular 16
How to show WooCommerce products into Angular 16 application?
How to show WooCommerce products into Angular 16 application?

WooCommerce products rest api working url:

WooCommerce products rest api working url

WordPress + WooCommerce products shop page:

How to add quantity input with add to button on WooCommerce shop page?

Guys here is the working code snippet and please use it carefully:

1. Very first guys, here are common basics steps to add angular 16 application on your machine and also we must have latest nodejs version installed for angular 16:

npm install -g @angular/cli 

ng new angulardemo // Set Angular 16 Application on your pc 

cd angulardemo // Go inside project folder

2. Now guys we will add below code into our angulardemo/src/app/app.component.ts file:

here I am using httpclient services to get rest api data

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  constructor(private http:HttpClient) {}

    //calling to get dynamic products via woocommerce rest api
    this.http.get('http://localhost/wordpressexpert/wp-json/wc/v1/products/').subscribe(data => {
        this.products = data;

3. Now guys we will add below code into our angulardemo/src/app/app.component.html file for output on web:

here I am showing backed data into our angular 16 frontend and for adding bootstrap 5 into angular, I shared the post link below

<div class="container p-5">
    <h3 class="mb-3">Angular + Woocommerce Shop</h3>
    <div class="row">
        <div class="col-sm-3" *ngFor="let product of products">
            <div class="card mb-2" style="width: 18rem;">
                <img [src]="product.image.src" class="card-img-top" alt="...">
                <div class="card-body">
                  <span class="badge rounded-pill bg-warning text-dark">${{product.regular_price}}</span>
                  <h5 class="card-title">{{}}</h5>
                  <span class="badge bg-secondary me-1">{{}}</span>
                  <p class="card-text" [innerHTML]="product.description | slice:0:60"></p>
                  <a href="#" class="btn btn-primary">Add to cart</a>

Guys to include Bootstrap 5 into our Angular 16 application please see below tutorial link:

4. Now guys we will add below code into our angulardemo/src/app/app.module.ts file:


import { HttpClientModule } from '@angular/common/http';
  imports: [

5. Guys here is the rest api url for getting WooCommerce products:


Now we are done friends and please run ng serve command to check the output in browser(locahost:4200) and if you have any kind of query then please do comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding please watch video above.



the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.