When creating an Angular app with a Headless WordPress instance, the Angular application and the WordPress website sit separate from each other, where the end result is an Angular application where your desired domain points to, and a hosted WordPress site that your Angular application pulls in data from using WordPress APIs. To start our project we are going to create our Angular Application. So, create a GIT repository called “Retail Leaders” and open it in Visual Studio Code or the text editor of your choice.
Once your text editor is opened we can then install our Angular app, and we are going to install the most recent version of Angular 19, choosing to use standard CSS, a SSR application, and including routing.
npx -p @angular/cli ng new retail-leaders-ui
This will create our new Angular app. Once installed we will install our UI library. In this project we will be using PrimeNG. To do this we will enter our new application.
cd retail-leaders-ui
and install our PrimeNG library
npm install primeng @primeng/themes primeicons primeflex
Now we need to update our app.config.ts file to use a PrimeNG theme.
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes), provideClientHydration(withEventReplay()),
provideAnimationsAsync(),
providePrimeNG({
theme: {
preset: Aura
}
})
]
};
To test it out we can create a homepage component
npx ng g c homepage
create a route for the homepage
import { Routes } from '@angular/router';
import { HomepageComponent } from './homepage/homepage.component';
export const routes: Routes = [
{path: '', component: HomepageComponent},
];
and then add a PrimeNG button to the homepage
<div class="card flex justify-center">
<p-button label="Check" />
</div>
import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
@Component({
selector: 'app-homepage',
imports: [
ButtonModule
],
templateUrl: './homepage.component.html',
styleUrl: './homepage.component.css'
})
export class HomepageComponent {
}
If we serve up our application we should then see everything working.
Go ahead and delete all of the content inside the app.component.html file besides <router-outlet />. Our application is now set up and now ready for us to start connecting our WordPress site.