chore(docs): Add CSP nonce documentation for Angular components (#3125)

.changeset/short-ways-arrive.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added documentation on how to use the Components for Angular with a strict Content Security Policy (CSP).

packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.docs.mdx

@@ -24,3 +24,20 @@ Importing the components to your project.
 Usage within your template.
 
 <Source code={AngularAppComponentSample} language="html" />
+
+## 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 <a href="https://content-security-policy.com/nonce/">CSP nonce documentation</a>.
+
+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 <a href="https://github.com/angular/angular/blob/main/adev/src/content/guide/security.md#content-security-policy">Angular security guide</a>.