### Install Project Dependencies

Source: https://github.com/italia/design-angular-kit/blob/main/README.EN.md

Run this command in the project directory to install all necessary npm dependencies.

```bash
npm i
```

--------------------------------

### Almond Optimizer Example

Source: https://github.com/italia/design-angular-kit/blob/main/src/assets/lib/hljs/README.md

Example command for using the Almond optimizer to build highlight.js with a specific module name and path.

```bash
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js
```

--------------------------------

### Button with Start Icon

Source: https://github.com/italia/design-angular-kit/blob/main/src/app/button/button-example-icon/button-example-icon.component.html

Demonstrates a button with an icon positioned at the start. Ensure the icon is correctly placed within the button structure.

```html
<button mat-button color="primary">
  <mat-icon svgIcon="login"></mat-icon>
  Login
</button>
```

--------------------------------

### Initialize Highlighting on Load

Source: https://github.com/italia/design-angular-kit/blob/main/src/assets/lib/hljs/README.md

Basic setup for highlight.js on a web page. Links to the library, a style, and initializes highlighting for all pre-existing code blocks.

```html
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
```

--------------------------------

### Launch the Application Locally

Source: https://github.com/italia/design-angular-kit/blob/main/README.EN.md

Execute this command to start the Design Angular Kit application on your local development server.

```bash
npm run start
```

--------------------------------

### Angular Update Guide URL

Source: https://github.com/italia/design-angular-kit/blob/main/UPDATE_GUIDE.md

Construct the URL to access the Angular update guide for specific versions.

```url
https://angular.dev/update-guide?v=20.0-21.0&l=3
```

--------------------------------

### Web Worker - Main Script

Source: https://github.com/italia/design-angular-kit/blob/main/src/assets/lib/hljs/README.md

Example of how to use a web worker for syntax highlighting in the main browser script. It sends code content to the worker and receives the highlighted HTML.

```javascript
addEventListener('load', function() {
  var code = document.querySelector('#code');
  var worker = new Worker('worker.js');
  worker.onmessage = function(event) { code.innerHTML = event.data; }
  worker.postMessage(code.textContent);
})
```

--------------------------------

### Install Design Angular Kit via NPM

Source: https://github.com/italia/design-angular-kit/blob/main/README.EN.md

Use this command to install the Design Angular Kit as a dependency in your project. It is recommended to save the dependency to your package.json.

```sh
npm install design-angular-kit --save
```

--------------------------------

### Add Design Angular Kit using Angular CLI

Source: https://github.com/italia/design-angular-kit/blob/main/README.EN.md

This command integrates the Design Angular Kit into your Angular project. It automatically handles dependency installation, package.json updates, and basic application configuration, excluding i18n settings.

```sh
ng add design-angular-kit --project <projectName>
```

--------------------------------

### Displaying Validation Status in Template-Driven Forms

Source: https://github.com/italia/design-angular-kit/blob/main/src/app/form-input/template-driven-validation-example/template-driven-validation-example.component.html

Conditionally display feedback to the user based on the validation status of a form input. This example shows how to display a 'saved' message when a value has been successfully saved.

```html
Salva @if (savedValue) {

Salvato 
`{{ savedValue }}
`

}
```

--------------------------------

### Customize Bootstrap-Italia SCSS Variables

Source: https://github.com/italia/design-angular-kit/blob/main/README.md

Override default Bootstrap-Italia SCSS variables like colors and fonts before importing the library. This example shows how to change the primary color and font families.

```scss
// modifica completa del template: è possibile ricompilare la libreria modificando alcune variabili SCSS

// Per l'override del colore $primary della palette in formato HSB (colore #FF3333 https://rgb.to/ff3333):
$primary-h: 0;
$primary-s: 80;
$primary-b: 100;

// Per l'override della famiglia di caratteri
$font-family-serif: 'Custom Font', Georgia, serif;
$font-family-sans-serif: 'Custom Font', Arial, Helvetica, sans-serif;
$font-family-monospace: 'Custom Font', 'Courier New', Courier, monospace;

// Importazione libreria SCSS di bootstrap-italia
@import 'bootstrap-italia/src/scss/bootstrap-italia';
```

--------------------------------

### Custom Initialization with jQuery

Source: https://github.com/italia/design-angular-kit/blob/main/src/assets/lib/hljs/README.md

An alternative to `initHighlightingOnLoad` using jQuery to iterate over code blocks and apply highlighting individually.

```javascript
$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
```

--------------------------------

### Initialize with Modular Application (AppModule)

Source: https://github.com/italia/design-angular-kit/blob/main/README.md

Import `DesignAngularKitModule` with `forRoot` in your main application module to initialize library features and all components.

```typescript
import { DesignAngularKitModule } from 'design-angular-kit';

@NgModule({
  imports: [...DesignAngularKitModule.forRoot()],
})
export class AppModule {}
```

--------------------------------

### Configure Design Angular Kit with Initial Parameters

Source: https://github.com/italia/design-angular-kit/blob/main/README.md

Both `provideDesignAngularKit` and `DesignAngularKitModule.forRoot()` accept an initial configuration object, `DesignAngularKitConfig`, to customize library behavior.

```typescript
import { provideDesignAngularKit, DesignAngularKitModule, DesignAngularKitConfig } from 'design-angular-kit';

// Puoi aggiungere alla libreria una configurazione iniziale
const initConfig: DesignAngularKitConfig | undefined = {
  /**
   * The bootstrap-italia asset folder path
   * @default ./bootstrap-italia
   */
  assetBasePath: string | undefined,

  /**
   * Load the <a href="https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/#fonts">bootstrap-italia fonts</a>
   * @default true
   */
  loadFont: boolean | undefined,

  ...
};

provideDesignAngularKit(initConfig)

DesignAngularKitModule.forRoot(initConfig)
```

--------------------------------

### Perform Unit Tests

Source: https://github.com/italia/design-angular-kit/blob/main/README.EN.md

Use this command to run the unit tests for the Design Angular Kit.

```bash
npm run test
```

--------------------------------

### Initialize with Standalone Components in Hybrid App

Source: https://github.com/italia/design-angular-kit/blob/main/README.md

If your application has an `AppModule` but you want to use standalone components, use `provideDesignAngularKit` within the main module.

```typescript
import { provideDesignAngularKit } from 'design-angular-kit';

@NgModule({
  imports: [],
  providers: [provideDesignAngularKit()],
})
export class AppModule {}
```

--------------------------------

### Include Language Module from CDN

Source: https://github.com/italia/design-angular-kit/blob/main/src/assets/lib/hljs/README.md

How to include a specific language module (e.g., Go) from a CDN when the default package doesn't contain it.

```html
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>
```

--------------------------------

### Clone the Design Angular Kit Repository

Source: https://github.com/italia/design-angular-kit/blob/main/README.EN.md

Use this command to clone the project repository from GitHub.

```bash
git clone https://github.com/italia/design-angular-kit.git
```

--------------------------------

### Conditional Rendering with Toggles

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/form/checkbox/checkbox.component.html

Demonstrates basic conditional rendering using @if and @else blocks for toggle states.

```html
@if (toggle) {

} @else {  }
```

--------------------------------

### Initialize with Standalone Components

Source: https://github.com/italia/design-angular-kit/blob/main/README.md

Use `provideDesignAngularKit` in your `ApplicationConfig` for standalone applications to initialize library features.

```typescript
import { provideDesignAngularKit } from 'design-angular-kit';

export const appConfig: ApplicationConfig = {
  providers: [...provideDesignAngularKit()],
};
```

--------------------------------

### Import Bootstrap-Italia SCSS Styles

Source: https://github.com/italia/design-angular-kit/blob/main/README.md

Import the Bootstrap-Italia SCSS library into your project's main SCSS file.

```scss
// Importazione libreria SCSS di bootstrap-italia
@import 'bootstrap-italia/src/scss/bootstrap-italia';
```

--------------------------------

### Configure Class Prefix

Source: https://github.com/italia/design-angular-kit/blob/main/src/assets/lib/hljs/CHANGES.md

To suppress the new default behavior of prefixing all CSS classes with `hljs-`, initialize Highlight.js with `classPrefix: ''`.

```html
<script type="text/javascript">
  hljs.configure({classPrefix: ''});
  hljs.initHighlightingOnLoad();
</script>
```

--------------------------------

### Displaying Component Outputs

Source: https://github.com/italia/design-angular-kit/blob/main/src/app/shared/api-parameters/api-parameters.component.html

Iterates over component outputs and displays their name and type. Use when the component has defined outputs.

```html
@if (component?.outputsClass && component.outputsClass.length > 0) {

### Output

@for (output of component.outputsClass; track output) {

`{{ output.name }}`

_Tipo:_ `{{ output.type }}`

}

}
```

--------------------------------

### Displaying Service Methods

Source: https://github.com/italia/design-angular-kit/blob/main/src/app/shared/api-parameters/api-parameters.component.html

Iterates over service methods, displaying their return type and attributes including name and type. Use when detailing service functionalities.

```html
@if (service?.methods && service.methods.length > 0) {

### Metodi

@for (method of service.methods; track method) {

@for (arg of method.args || \[\]; track arg) { }

_Tipo di ritorno:_ `{{ method.returnType }}`

Attributi:

`{{ arg.name }}`

_Tipo:_ `{{ arg.type }}`

}

}
```

--------------------------------

### Configure Assets in angular.json

Source: https://github.com/italia/design-angular-kit/blob/main/README.md

Add Bootstrap-Italia assets to your project by modifying the 'assets' array in your angular.json file.

```json
{
 "assets": [
    ...
    {
      "glob": "**/*",
      "input": "./node_modules/bootstrap-italia/",
      "output": "/bootstrap-italia/"
    }
  ]
}
```

--------------------------------

### Displaying Component Inputs

Source: https://github.com/italia/design-angular-kit/blob/main/src/app/shared/api-parameters/api-parameters.component.html

Iterates over component inputs and displays their name and type. Use when the component has defined inputs.

```html
@if (component?.inputsClass && component.inputsClass.length > 0) {

### Input

@for (input of component.inputsClass; track input) {

`{{ input.name }}`

_Tipo:_ `{{ input.type }}`

}

}
```

--------------------------------

### Basic Tab Iteration

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html

A simplified iteration over tabs, useful for scenarios where only the basic tab structure needs to be rendered without additional conditional logic for icons or editability.

```html
@if (tabs) {

@for (tab of tabs; track tab.id) {

}

}
```

--------------------------------

### Conditional Slim Header Rendering

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html

Renders the slim version of the header, including its title and login options, only when the 'showSlim' input is true.

```html
@if (showSlim) {

{{ slimTitle }}

{{ slimTitle }}

@if (loginStyle === 'default') {

[{{ 'it.navigation.login' | translate }}](#)

} @if (loginStyle === 'full') { [{{ 'it.navigation.full-login' | translate }}](#) }

}
```

--------------------------------

### Transfer List Items Loop

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.html

Iterates over a list of items (expected to be observable) and displays the 'text' property of each item. Uses async pipe and trackBy for performance.

```html
@for (item of items$ | async; track item.value) {

 {{ item.text }}

}
```

--------------------------------

### Rendering Item Content

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.html

Conditionally renders either HTML content or plain text for a navigation item.

```html
@if (item.html) {

} @else {

{{ item.text }}

}
```

--------------------------------

### Configure Line Breaks with BR Tag

Source: https://github.com/italia/design-angular-kit/blob/main/src/assets/lib/hljs/README.md

Configure highlight.js to use `<br>` tags for line breaks when not using containers that preserve them, such as `pre`.

```javascript
hljs.configure({useBR: true});

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});
```

--------------------------------

### Configure i18n Assets in angular.json

Source: https://github.com/italia/design-angular-kit/blob/main/README.md

Add i18n assets for Bootstrap-Italia to your project by modifying the 'assets' array in your angular.json file.

```json
{
  "assets": [
    ...
    {
      "glob": "**/*",
      "input": "./node_modules/design-angular-kit/assets/i18n",
      "output": "/bootstrap-italia/i18n/"
    }
  ]
}
```

--------------------------------

### Specify Language Class

Source: https://github.com/italia/design-angular-kit/blob/main/src/assets/lib/hljs/README.md

How to manually specify the language for code highlighting using a class attribute on the `<code>` tag.

```html
<pre><code class="html">...</code></pre>
```

--------------------------------

### Transfer List Item Count and Title

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.html

Displays the number of items and their pluralization, along with a translatable title. Uses async pipe for observable data.

```html
@if (numberOfItems$ | async; as numberOfItems) { {{ numberOfItems.length }} {{ (numberOfItems.length === 1 ? 'it.transfer.item' : 'it.transfer.items') | translate }} } {{ title | titlecase }}
```

--------------------------------

### Conditional Navigation Button Display

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/utils/error-page/error-page.component.html

Conditionally renders navigation buttons (back and home) if either showBackButton or showHomeButton is true. Includes specific logic for the home button text.

```html
@if (showBackButton || showHomeButton) {

@if (showBackButton) { } @if (showHomeButton) { {{ 'it.utils.error-page.go-to-homepage' | translate }} }

}
```

--------------------------------

### Update Angular Core and CLI Dependencies

Source: https://github.com/italia/design-angular-kit/blob/main/UPDATE_GUIDE.md

Update the `@angular/core` and `@angular/cli` packages to the target version using the Angular CLI command.

```bash
ng update @angular/core@21 @angular/cli@21
```

--------------------------------

### Iterating and Rendering Tabs

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html

Iterates over a collection of tabs, rendering each tab's label and conditionally displaying an icon or an editable state indicator.

```html
@if (tabs) {

@for (tab of tabs; track tab.id; let i = $index) {*   @if (tab.icon) { } {{ tab.label }} @if (editable) { }
}
}
```

--------------------------------

### Disable Highlighting

Source: https://github.com/italia/design-angular-kit/blob/main/src/assets/lib/hljs/README.md

Use the `nohighlight` class to disable syntax highlighting for specific code blocks.

```html
<pre><code class="nohighlight">...</code></pre>
```

--------------------------------

### Including Language Submodes in highlight.js

Source: https://github.com/italia/design-angular-kit/blob/main/src/assets/lib/hljs/CHANGES.md

Demonstrates how to include language submodes directly under 'contains' for auxiliary modes in highlight.js. This is useful for modes needed only in one place and may not generate separate spans if 'className' is omitted.

```javascript
contains: [
  'string',
  'number',
  {begin: '\n', end: hljs.IMMEDIATE_RE}
]
```

--------------------------------

### Customize Bootstrap Italia SCSS Variables

Source: https://github.com/italia/design-angular-kit/blob/main/README.EN.md

Override default SCSS variables like colors and font families before importing the `bootstrap-italia.scss` file to customize the library's appearance.

```scss
// complete modification of the template: it is possible to recompile the library by modifying some SCSS variables

// For the override of the colour $primary of the HSB palette (colour #FF3333 https://rgb.to/ff3333):
$primary-h: 0;
$primary-s: 80;
$primary-b: 100;

// For the character family override
$font-family-serif: 'Custom Font', Georgia, serif;
$font-family-sans-serif: 'Custom Font', Arial, Helvetica, sans-serif;
$font-family-monospace: 'Custom Font', 'Courier New', Courier, monospace;

// Importing bootstrap-italia SCSS library
@import 'bootstrap-italia/src/scss/bootstrap-italia';
```

--------------------------------

### Web Worker - Worker Script

Source: https://github.com/italia/design-angular-kit/blob/main/src/assets/lib/hljs/README.md

The worker script that receives code content, imports highlight.js, performs highlighting, and posts the result back to the main thread.

```javascript
onmessage = function(event) {
  importScripts('<path>/highlight.pack.js');
  var result = self.hljs.highlightAuto(event.data);
  postMessage(result.value);
}
```

--------------------------------

### Button with End Icon

Source: https://github.com/italia/design-angular-kit/blob/main/src/app/button/button-example-icon/button-example-icon.component.html

Shows a button with an icon placed at the end. This configuration is useful for actions that follow text content.

```html
<button mat-button color="primary">
  Login
  <mat-icon svgIcon="login"></mat-icon>
</button>
```

--------------------------------

### Input Component Template

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/form/input/input.component.html

This snippet shows the conditional rendering logic for labels, currency/percentage symbols, translation keys, descriptions, and validation messages within the Angular Input component's template.

```HTML
@if (label) { {{ label }} } @if (type === 'number') { @if (currency || percentage) { {{ symbol }} }  {{ 'it.form.increase-value' | translate }} {{ 'it.form.decrease-value' | translate }} } @else {  }

@if (description) { {{ description }} } @if (isInvalid) {

@if (!customError.hasChildNodes()) { {{ invalidMessage | async }} }

}
```

--------------------------------

### Dropdown Link HTML Structure

Source: https://github.com/italia/design-angular-kit/blob/main/src/app/dropdown/dropdown-link-example/dropdown-link-example.component.html

This snippet shows the HTML template for a dropdown link. It includes an iteration over items to display them and placeholders for open and close times.

```html
<p>Apri dropdown @for (item of items; track item) { {{ item.text }} }</p>

<p>Open: {{ openTime }}</p>

<p>Close: {{ closeTime }}</p>
```

--------------------------------

### Upload File List Template

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/form/upload-file-list/upload-file-list.component.html

The main template for the upload file list component, handling the display of files, buttons, and status messages based on various conditions.

```html
@if (!hideLoadButton) {  @if (label) { {{ label }} } @else { {{ 'it.form.upload' | translate }} } } @if (fileList.length) {

@for (item of fileList; track item.id) {*   @if (images) {
    
    } @else { }
    
    {{ 'it.form.uploaded-file' | translate: { name: item.file.name } }} {{ item.file.name }} {{ getFileSize(item.file) }}
    
    @if (item.removable && (!item.progress || item.progress < 100)) { {{ 'it.form.delete-file' | translate: { name: item.file.name } }} } @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) { {{ 'it.form.upload-complete' | translate }} } @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) { }
}

}
```

--------------------------------

### Search Component Template

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/form/search/search.component.html

The main template for the Search component, handling label display, asynchronous search results, and invalid state messages.

```html
@if (label) { {{ label }} }  @if (searchResults$ | async as autocomplete) {

@for (entry of autocomplete.relatedEntries; track searchItemTrackByValueFn($index, entry)) {*   @if (entry.avatarSrcPath) {
    
    } @if (entry.icon) { } @if (entry.label) { _{{ entry.label }}_ }
}

} @if (isInvalid) {

@if (!customError.hasChildNodes()) { {{ invalidMessage | async }} }

}
```

--------------------------------

### Navigation Item Iteration and Conditional Rendering

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.html

Iterates through navigation items and conditionally renders titles based on their level using @switch.

```html
@for (item of items; track item.href) { } @switch (level) {
  @case (1) {

{{ item.title }}
----------------

  }
  @case (2) {

### {{ item.title }}

  }
  @case (3) {

#### {{ item.title }}

  }
  @case (4) {

##### {{ item.title }}

  }
  @default {

###### {{ item.title }}

  }
}
```

--------------------------------

### Conditional Rendering with Group States

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/form/checkbox/checkbox.component.html

Shows conditional rendering based on group and invalid states for the checkbox.

```html
@if (group) { } @if (isInvalid && group) {

}
```

--------------------------------

### Adding Editable Tabs

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html

Conditionally renders an 'Add a tab' link when the editable state is true, typically used for user-configurable tab interfaces.

```html
@if (editable) {*   [Aggiungi un tab](#)
}
```

--------------------------------

### Provide DesignAngularKit with Custom TranslateLoader (Module)

Source: https://github.com/italia/design-angular-kit/blob/main/README.md

Configure ngx-translate to load both library and application translations using MultiTranslateHttpLoader when using the DesignAngularKitModule.forRoot method.

```typescript
import { HttpBackend } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core';
import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';
import { DesignAngularKitModule } from 'design-angular-kit';

DesignAngularKitModule.forRoot({
  translateLoader: (itPrefix: string, itSuffix: string) => ({
    provide: TranslateLoader,
    useFactory: (http: HttpBackend) =>
      new MultiTranslateHttpLoader(http, [
        { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
        { prefix: './assets/i18n/' }, // Your i18n location
      ]),
    deps: [HttpBackend],
  }),
});
```

--------------------------------

### Back Button HTML Structure

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/navigation/back-button/back-button.component.html

Defines the HTML structure for the back button component, conditionally rendering elements based on input properties like buttonStyle and showIcon. It also handles dynamic translation keys for the button's text.

```html
@if (buttonStyle === 'link') { [](#)} @if (buttonStyle === 'button') { } @if (showIcon) { } {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}
```

--------------------------------

### Textarea Component Template

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/form/textarea/textarea.component.html

The template for the Textarea component includes conditional rendering for labels, descriptions, and error messages based on component properties.

```html
@if (label) { {{ label }} } @if (description) { {{ description }} } @if (isInvalid) {

@if (!customError.hasChildNodes()) { {{ invalidMessage | async }} }

}
```

--------------------------------

### Conditional Error Description Display

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/utils/error-page/error-page.component.html

Renders the error description, falling back to a translated default based on the errorCode if errorDescription is not provided and isDefaultErrorCode is true. Otherwise, it uses the provided errorDescription or a generic support message translation.

```html
@if (!errorDescription && isDefaultErrorCode) { {{ 'it.utils.error-page.' + errorCode + '.description' | translate }} } @else { {{ errorDescription || 'it.errors.generic-support-message' | translate }} }
```

--------------------------------

### Language Switcher HTML Structure

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/utils/language-switcher/language-switcher.component.html

This HTML template defines the structure for the language switcher. It displays the current language and conditionally renders a list of available languages with their labels and selection status.

```html
<p>{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }} {{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</p>
@if (availableLanguages) {
  @for (lang of availableLanguages; track lang.code) {
    {{ lang.label }}
    @if (lang.code === (currentLang$ | async)?.code) {
      {{ 'it.utils.selected' | translate }}
    }
  }
}
```

--------------------------------

### Conditional Search Bar Rendering

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html

Renders the search bar element only when the 'showSearch' input is true.

```html
@if (showSearch) {

{{ 'it.navigation.search' | translate }}[](#)

}
```

--------------------------------

### Provide DesignAngularKit with Custom TranslateLoader (Function)

Source: https://github.com/italia/design-angular-kit/blob/main/README.md

Configure ngx-translate to load both library and application translations using MultiTranslateHttpLoader when using the provideDesignAngularKit function.

```typescript
import { HttpBackend } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core';
import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';
import { provideDesignAngularKit } from 'design-angular-kit';

provideDesignAngularKit({
  translateLoader: (itPrefix: string, itSuffix: string) => ({
    provide: TranslateLoader,
    useFactory: (http: HttpBackend) =>
      new MultiTranslateHttpLoader(http, [
        { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
        { prefix: './assets/i18n/' }, // Your i18n location
      ]),
    deps: [HttpBackend],
  }),
});
```

--------------------------------

### Import DesignAngularKitModule in Other Modules

Source: https://github.com/italia/design-angular-kit/blob/main/README.md

Use `forChild` when importing `DesignAngularKitModule` in other application modules to include all library components.

```typescript
import { DesignAngularKitModule } from 'design-angular-kit';

@NgModule({
  imports: [...DesignAngularKitModule.forChild()],
  exports: [DesignAngularKitModule],
})
export class SharedModule {}
```

--------------------------------

### Steppers Container HTML Template

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/core/steppers/steppers-container/steppers-container.component.html

The main HTML template for the Steppers Container component. It uses Angular's structural directives (@if, @for) to conditionally render steps, progress indicators, and navigation buttons.

```html
@if (showHeader) {

@if (steps) {

@for (step of steps; track step.id; let i = $index) {*   @if (step.icon && !steppersNumber) { } @if (steppersNumber) { @if (i < activeStep) { } @else { {{ 'it.core.step' | translate }} {{ i + 1 }} } } {{ step.label }} @if (i < activeStep && !steppersNumber) { } @if (i === activeStep) { {{ 'it.core.active' | translate }} } }

} @if (steps) { @if (!steppersNumber) { {{ activeStep + 1 + '/' + steps.length }} } @else { @for (step of steps; track step.id; let i = $index) { {{ i + 1 }} } } }

}

@if (steps?.get(activeStep); as step) {

}

@if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {

@if (showBackButton) { {{ 'it.core.back' | translate }} }
@if (!!progressStyle && steps) {
@if (progressStyle === 'dots') {

@for (step of steps; track step; let i = $index) {*
   {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }} {{ i < activeStep ? '- ' + (confirmedLabel ? confirmedLabel : ('it.core.confirmed' | translate)) : '' }}
}

}
} @if (showSaveButton) { {{ 'it.general.save' | translate }} }
@if (showForwardButton) { {{ 'it.core.forward' | translate }} }
@if (showConfirmButton) { {{ confirmedLabel ? confirmedLabel : ('it.core.confirmed' | translate) }}
}

}

{{ confirmedLabel ? confirmedLabel : ('it.core.confirmed' | translate) }}
```

--------------------------------

### Nested Navigation Item Iteration

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.html

Iterates through child items of a navigation item.

```html
@for (item of item.childs; track item.href) { }
```

--------------------------------

### Import Standalone Components in Standalone Component

Source: https://github.com/italia/design-angular-kit/blob/main/README.EN.md

Import standalone components directly into a standalone Angular component. This is the recommended approach for modern Angular applications, enabling tree-shakable component usage.

```typescript
import { ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule } from 'design-angular-kit';

@Component({
  selector: 'app-product',
  standalone: true,
  imports: [ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule],
  templateUrl: './product.component.html',
})
export class ProductComponent {}
```

--------------------------------

### Import Standalone Components in NgModule

Source: https://github.com/italia/design-angular-kit/blob/main/README.EN.md

Import specific standalone components like alerts, pagination, and breadcrumbs into your NgModule. This approach allows for a more granular inclusion of library features.

```typescript
import { ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule } from 'design-angular-kit';

@NgModule({
  imports: [
    ItAlertComponent,
    ItPaginationComponent,
    ItBreadcrumbsModule, // Includes ItBreadcrumbComponent and ItBreadcrumbItemComponent
  ],
})
export class YourAppModule {}
```

--------------------------------

### Angular Select Component Template

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/form/select/select.component.html

The core HTML template for the Angular Select component. It uses structural directives like @if and @for to dynamically render content based on component state.

```html
@if (label) { {{ label }} } @if (defaultOption) { {{ defaultOption }} } @if (options) { @for (option of options; track option.value) { {{ option.text ?? option.value }} } } @if (groups) { @for (group of groups; track group) { @for (option of group.options; track option.value) { {{ option.text ?? option.value }} } } } @if (description) { {{ description }} } @if (isInvalid) {

@if (!customError.hasChildNodes()) { {{ invalidMessage | async }} }

}
```

--------------------------------

### Chip Component Template

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/core/chip/chip.component.html

The HTML template for the Chip component. It uses Angular's structural directives (@if) to conditionally display elements such as an icon, an avatar, the label, and a close button. The label is displayed using interpolation, and the close button text is translated.

```html
@if (icon) { } @if (avatar) {

} {{ label }} @if (showCloseButton) { {{ 'it.core.remove' | translate }} {{ label }} }
```

--------------------------------

### Pagination Component Changer HTML Structure

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.html

This snippet illustrates the HTML for a 'jump to page' changer within the pagination component, utilizing Angular's @if and @for directives.

```html
@if (currentChanger !== undefined) { {{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }} @for (value of changerValues; track value) {*   {{ value }} / {{ 'it.core.page' | translate | lowercase }}
}
}
@if (showJumpToPage) { }
```

--------------------------------

### Conditional Navigation Display

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.html

Conditionally renders navigation elements based on 'hideNavigationOnMobile' and 'isNotMobile' states.

```html
@if (!hideNavigationOnMobile || (isNotMobile | async)) {

{{ selectedTitle | async }}

Chiudi

Indietro

@if (headerAsAccordion) {

### {{ header }}

} @else {

### {{ header }}

}

}
```

--------------------------------

### Displaying Label Conditionally

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/form/checkbox/checkbox.component.html

Conditionally displays a label when a custom label element has no child nodes.

```html
@if (!customLabel.hasChildNodes()) { {{ label }} }
```

--------------------------------

### Nested Accordion Structure

Source: https://github.com/italia/design-angular-kit/blob/main/src/app/accordion/accordion-nested-example/accordion-nested-example.component.html

This HTML template shows a parent accordion group containing multiple nested accordion items. It includes event binding to capture the 'shown' and 'hidden' events emitted by the accordion components.

```html
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="accordion" id="accordionExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Accordion Item #1
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element and the overall accordion layout. 
              <div class="accordion" id="accordionExampleNested">
                <div class="accordion-item">
                  <h2 class="accordion-header" id="headingOneNested">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneNested" aria-expanded="true" aria-controls="collapseOneNested">
                      Nested Accordion Item #1
                    </button>
                  </h2>
                  <div id="collapseOneNested" class="accordion-collapse collapse show" data-bs-parent="#accordionExampleNested">
                    <div class="accordion-body">
                      Nested item content 1.
                    </div>
                  </div>
                </div>
                <div class="accordion-item">
                  <h2 class="accordion-header" id="headingTwoNested">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwoNested" aria-expanded="false" aria-controls="collapseTwoNested">
                      Nested Accordion Item #2
                    </button>
                  </h2>
                  <div id="collapseTwoNested" class="accordion-collapse collapse" data-bs-parent="#accordionExampleNested">
                    <div class="accordion-body">
                      Nested item content 2.
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Accordion Item #2
            </button>
          </h2>
          <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element and the overall accordion layout. 
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Accordion Item #3
            </button>
          </h2>
          <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element and the overall accordion layout. 
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<p>Ultimo evento shown emesso da = {{ shownComponent }}</p>

<p>Ultimo evento hidden emesso da = {{ hiddenComponent }}</p>
```

--------------------------------

### Pagination Component HTML Structure

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.html

This snippet shows the main HTML structure for the pagination component, using Angular's structural directives like @if and @for for conditional rendering.

```html
@if (pages.length) {

*   [@if (!textLinks) { } {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }} @if (textLinks) { {{ 'it.core.previous' | translate }} }](#)
@if (simpleMode) {*   {{ currentPage + 1 }}
*   /
*   {{ pageNumbers }}
*   [{{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}](#)
}
@else {
 @if (pageNumbers > visiblePages && pages[0] >= 2) {*   [1](#)
@if (pages[0] >= 3) {*   ...
}
}
@for (page of pages; track page) {*   @if (page === currentPage + 1) { [{{ 'it.core.page' | translate }} {{ page }}](#) } @else { [{{ page }}](#) }
}
@if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {
 @if (pages[pages.length - 1] < pageNumbers - 1) {*   ...
}
*   [{{ pageNumbers }}](#)
}
}
*   [{{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }} @if (textLinks) { {{ 'it.core.next' | translate }} } @else { }](#)

}
```

--------------------------------

### Conditional Rendering for Invalid State without Group

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/form/checkbox/checkbox.component.html

Illustrates conditional rendering when the checkbox is invalid but not part of a group.

```html
@if (isInvalid && !group) {

}
```

--------------------------------

### Radio Button Template Structure

Source: https://github.com/italia/design-angular-kit/blob/main/projects/design-angular-kit/src/lib/components/form/radio-button/radio-button.component.html

Basic template structure for an Angular radio button component. It conditionally displays a label or an invalid message based on component states.

```html
@if (!customLabel.hasChildNodes()) { {{ label }} } @if (group) { } @if (isInvalid && group) {

@if (!customError.hasChildNodes()) { {{ invalidMessage | async }} }

}

@if (isInvalid && !group) {

@if (!customError.hasChildNodes()) { {{ invalidMessage | async }} }

}
```