No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

@swisspost/design-system-components-angular

npm version

The Design System Angular Components, ready for use in your Angular project.

VersionAngular
9.x19.x || 20.x
8.x18.x
7.x16.x || 17.x
2.x16.x
1.x16.x
npm install @swisspost/design-system-components-angular

Importing the components to your project.

// app.module.ts

import { NgModule } from '@angular/core';
import { PostComponentsModule } from '@swisspost/design-system-components-angular';

@NgModule({
  ...
  imports: [PostComponentsModule],
  ...
})
export class AppModule {}

Usage within your template.

<!-- app.component.html -->

<post-icon *ngIf="condition" [attr.name]="iconName"></post-icon>

Content Security Policy (CSP)

Angular components use inline scripts and styles. To enable their execution while enforcing a strict Content Security Policy (CSP), you can use a CSP nonce.

A nonce is a randomly generated word or phrase intended for one-time use, which must update with each HTTP response. Inline scripts or styles with a nonce attribute matching the current nonce value set in the CSP will execute properly, while others will be blocked. Learn more in the CSP nonce documentation.

There are two ways to configure Angular to automatically set nonce attributes:

  1. Set an ngCspNonce attribute on the root application element.
  2. Provide the nonce using the CSP_NONCE injection token.

This configuration will also apply automatically to components in the Components for Angular package. For more details, refer to the Angular security guide.