Porsche Design System

Angular

Table of Contents

Quick start
Integration

Quick start#

To build an Angular application using the Porsche Design System, follow these steps. This guide is based on the following dependencies:

@angular/*@21

tailwindcss@4

@porsche-design-system/components-angular@4

# Create a new application by executing:
npm install -g @angular/cli
ng new my-app

✔ Do you want to create a 'zoneless' application without zone.js (Developer Preview)? "Yes"
✔ Which stylesheet format would you like to use? "CSS"
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? "No"

You're all set! Start building your own application now.

Integration#

Step 1

Install the Porsche Design System within your project directory.

npm install @porsche-design-system/components-angular

Step 2

Add the PorscheDesignSystemModule to the imports array of your @Component or @NgModule declaration.

// src/app/app.ts

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
+ import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';

@Component({
  selector: 'app-root',
+ imports: [RouterOutlet, PorscheDesignSystemModule],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {
  protected readonly title = signal('angular');
}

Step 3

Add the PDS Stylesheet to your main CSS file — this single import covers all required and recommended global styles (for websites primarily targeting users in China, use the /cn import instead, see China CDN).

/* src/styles.css */

+ @import '@porsche-design-system/components-angular/index.css';

To prevent FOUC, hide elements until they are either registered (:defined) or fully rendered by Stencil (.hydrated). If you run into issues with the :defined pseudo-class, scope the style to specific tags instead (e.g., :is(p-button, p-accordion, …):not(:defined)). See Initialization for more details.

/* src/styles.css */

@import '@porsche-design-system/components-angular/index.css';

+ :is(p-accordion, p-banner, p-button, …):not(:defined) {
+   visibility: hidden;
+ }

Step 4 (recommended)

To improve your web application's loading performance, integrate Partials from the Porsche Design System into the <head> section of your HTML to preload fonts, icons, and component chunks.

Create a prebuild.mjs file in your project root directory.

// prebuild.mjs

import { readFileSync, mkdirSync, writeFileSync } from 'node:fs';
import {
  getComponentChunkLinks,
  getFontLinks,
  getIconLinks,
  getMetaTagsAndIconLinks,
} from '@porsche-design-system/components-angular/partials';

const headPartials = [
  // preloads fonts
  getFontLinks(),
  // preloads icons
  getIconLinks(),
  // preloads components
  getComponentChunkLinks(),
  // injects favicon, apple touch icons, android touch icons, etc.
  getMetaTagsAndIconLinks({ appTitle: 'Porsche' }),
].join('\n');

const html = readFileSync('src/index.html', 'utf-8');
const transformed = html.replace(/<\/head>/, `${headPartials}\n$&`);

mkdirSync('.generated', { recursive: true });
writeFileSync('.generated/index.html', transformed);

console.log('Generated .generated/index.html with PDS partials.');

Configure the package.json.

"scripts": {
  "ng": "ng",
+ "prebuild": "node prebuild.mjs",
+ "start": "npm run prebuild && ng serve",
+ "build": "npm run prebuild && ng build",
+ "watch": "npm run prebuild && ng build --watch --configuration development",
  "test": "ng test",
},

Configure the angular.json.

"architect": {
  "build": {
    "builder": "@angular/build:application",
    "options": {
+     "index": ".generated/index.html",
      "browser": "src/main.ts",
      "tsConfig": "tsconfig.app.json",
      …
    },
  },
},

Step 5 (recommended)

Setting up Tailwind CSS with the Porsche Design System Tailwind CSS Theme allows you to use a utility-first CSS framework that guarantees seamless styling consistency with Porsche's design principles.

Install Tailwind CSS within your project directory.

npm install tailwindcss @tailwindcss/postcss postcss

Create a .postcssrc.json file in your project root directory.

// .postcssrc.json

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Import Tailwind CSS and the Porsche Design System Tailwind CSS Theme.

/* src/styles.css */
@import '@porsche-design-system/components-angular/index.css';

+ @import 'tailwindcss';
+ @import '@porsche-design-system/components-angular/tailwindcss';

Step 6

Add a Porsche Design System component (e.g., <p-wordmark></p-wordmark>) with some Tailwind CSS styles. Then, run npm run start and verify that the component and styles display correctly.

// src/app/app.html

<div class="grid justify-items-center gap-fluid-md m-static-lg p-fluid-lg bg-surface rounded-lg">
  <p-wordmark></p-wordmark>
  <h1 class="prose-heading-4xl">Porsche Design System</h1>
</div>
<div class="…">…</div>