Angular

Please note, that Angular has 2 modes using components:

  • standalone
  • module based

In Angular 19, which is expected to be released in November 2024, the standalone: true flag will become the default for all components, directives, and pipes.

Standalone components were introduced in Angular 14 as a developer preview in June 2022.

Angular 18 (Standalone Components)

Install dap-design-system inside project folder.

npm i dap-design-system

In angular.json add light.theme.css (just an example, some parts omitted).

"angular-project-name": {
    "architect": {
        "build": {
            "options": {
                "styles": [
                    "src/styles.scss",
                    "dap-design-system/dist/light.theme.css"
                ],
            }
        }
    }
}

In main.ts add import 'dap-design-system/dist/dds.js';

import 'dap-design-system/dist/dds.js';
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));
Adding an Input Component to AppComponent

In app.component.ts add:

  • CUSTOM_ELEMENTS_SCHEMA import and schema
  • also add onDDSInputChanged function.
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'angular-project';

  onDDSInputChanged(event: CustomEvent) {
    console.log(event.detail.value);
  }
}

In app.component.html add a form and dap-ds-input with (dds-change)="onDDSInputChanged($event)"

<h1>App Component</h1>
<form id="input-form">
  <dap-ds-input
    (dds-change)="onDDSInputChanged($event)"
    id="text-input"
    name="text-input"
    required
    label="Required"
    description="Description"
    helperText="Validate for required"
    tooltip="Tooltip content"
    feedbackType="negative" value=""></dap-ds-input>
</form>
Angular 15 (Module Based Components)

Install dap-design-system inside project folder.

npm i dap-design-system

In angular.json add light.theme.css (just an example, some parts omitted).

"angular-project-name": {
    "architect": {
        "build": {
            "options": {
                "styles": [
                    "src/styles.scss",
                    "dap-design-system/dist/light.theme.css"
                ],
            }
        }
    }
}

In main.ts add import 'dap-design-system/dist/dds.js';

import 'dap-design-system/dist/dds.js';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';


platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

In app.module.ts add CUSTOM_ELEMENTS_SCHEMA.

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
Adding an Input Component to AppComponent

In app.component.ts add custom event function: onDDSInputChanged

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-15';

  onDDSInputChanged(event: CustomEvent) {
    console.log(event.detail.value);
  }
}

In app.component.html add dap-ds-input

<h1>App Component</h1>
<form id="input-form">
  <dap-ds-input
    (dds-change)="onDDSInputChanged($event)"
    id="text-input"
    name="text-input"
    required
    label="Required"
    description="Description"
    helperText="Validate for required"
    tooltip="Tooltip content"
    feedbackType="negative" value=""></dap-ds-input>
</form>
<router-outlet></router-outlet>