Porsche Design System

Angular

Table of Contents

Quick start
When are Porsche Design System components initialized?
How do Porsche Design System components work in detail?
Sample integration

Quick start#

To build your own application with the Angular components of the Porsche Design System, follow these steps:

Follow the instructions at Introduction to get the required npm package

Run ng new my-app to create a new Angular workspace and initial project

Install the Porsche Design System

# install with npm:
npm install @porsche-design-system/components-angular

# install with yarn:
yarn add @porsche-design-system/components-angular

You are ready to start building your own application.

Integration

After adding the @porsche-design-system/components-angular package to your project, you've to import the PorscheDesignSystemModule in every module you want to use the components.

The following setup is a standard Angular CLI project:

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, PorscheDesignSystemModule], // <-- PDS module is imported here
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Change your AppComponent to use at least one Porsche Design System component, for example:

// app.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<p-heading>Welcome to Angular</p-heading>`,
  changeDetection: ChangeDetectionStrategy.OnPush, // disable automatic change detection, https://angular.io/api/core/ChangeDetectionStrategy
})
export class AppComponent {}

Run yarn start or npm start and check if the components are displayed correctly.

Now, when you look at the result in your browser you should see an error message like The Porsche Design System is used without using the getInitialStyles() partial.

To fix this, you have to apply the getInitialStyles() partial which is mandatory since v3.7.0.

Using Standalone Components

When using Standalone Components the PorscheDesignSystemModule needs to be included in the component itself.

// app.component.ts (standalone)

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';

@Component({
selector: 'app-root',
  standalone: true,
  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
  template: `<p-heading>Welcome to Angular</p-heading>`,
changeDetection: ChangeDetectionStrategy.OnPush, // disable automatic change detection, https://angular.io/api/core/ChangeDetectionStrategy
})
export class AppComponent {}

When are Porsche Design System components initialized?#

See componentsReady() for further information.

How do Porsche Design System components work in detail?#

See Initialization for further information.

Sample integration#

We provide a public GitHub repository with a basic sample project setup to show how it is managed in real code. You can find the repository of the Angular example project here: Sample integration Angular

Get the project up and running

Clone the repository by executing git clone https://github.com/porsche-design-system/sample-integration-angular.git

Follow the installation guidelines in the README.md file

Attention