Guidance on how to integrate Compound with the Angular framework

Integrating with Angular

  • Create Angular application (install all required packages for that for e.g.- @angular/cli) npm i -g @angular/cl
  • Create a project folder ng new folder-name --no-standalone
  • Run it locally
  • Install npm i compound-design-system in the same angular app
  • Add the required components in app.component.html from Compound design system.
  • Add SCHEMA-related changes in the app.module
  • And add co-sl-styles.css , assets, index.js, compound.js paths in angular.json

                                                            // import
                                                        import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
                                                            schemas :[CUSTOM_ELEMENTS_SCHEMA]
  • Run ng serve

                                                            "assets": [
                                                                        "output": "./assets"
                                                                    "styles": [
                                                                    "scripts": [

Form Components with Angular

First, create an angular project and import the design system library into your project.

Follow the steps provided above.

Integrating Form Components

Form components (input, radio, checkbox etc.,) need additional work compared to the other UI components (alert, tabs, callout etc.) as they need to hold a value provided by the user.

To achieve this, we can follow the steps below:

First import ReactiveFormsModule to your app module file

                                                            import { ReactiveFormsModule } from '@angular/forms';


  1. Write a reactive form using the required co-components
  2. Add ngDefaultControl attribute to the component as shown below

                                                            <co-radio id="myRadioButton"  formControlName="radioButton" ngDefaultControl dataNames='Option 1,Option 2,Option 
                                                        3' helperText="Choose an Option" layout="vertical" errorMessage="please choose an option" >


  1. In the app.component.ts file add the following into the class appComponent, It would look like the code provided below
  2. Add the code below to the ngOnInit() method

                                                            this.SignupForm = new FormGroup({
                                                              radioButton: this. radioButtonComponent,

For components like co-input, co-text-area and co-input-group the above steps would be enough to ensure the component can display a value with

{{SignupForm.value | json}} but for co-radio, co-select-menu etc. proceed with the below steps.


Add a handleChange() method to the component as shown below:

                                                            <co-radio id="myRadioButton" (change)="handleRadioChange($event)"
                                                        formControlName="radioButton" ngDefaultControl
                                                        dataNames='Option1,Option 2, Option 3'; helperText="Choose
                                                        an Option" layout="vertical" errorMessage="please choose,
                                                        an option" [value]="radioButtonComponent.value">


Declare this method in your app.compoent.ts method in the exported class:

                                                            handleRadioChange(event: any) {
                                                        this.selectedOption = event.detail;
                                                        this. radioButtonComponent.setValue(this.selectedOption);

This holds the value for the radio component.


                                                            <co-radio id="myRadioButton" (change)="handleRadioChange($event)"
                                                        formControlName="radioButton" ngDefaultControl
                                                        dataNames=';Option 1,Option 2,Option 3'; helperText="Choose
                                                        an Option" layout="vertical" errorMessage="please choose
                                                        an option" [value]=" radioButtonComponent.value">

This is how your html code might look like after adding the components into the form:

                                                            <div class="content">
                                                            <div class="left-side">
                                                                <h1>Compound design system</h1>
                                                                <form [formGroup]="SignupForm" (ngSubmit)="onSubmit()">
                                                                        <co-icon name="facebook"></co-icon>
                                                                        <co-icon name="instagram"></co-icon>
                                                                        <co-button variant="primary">Primary</co-button>
                                                                        <co-input id="message" expValidate emptyValidate maxChars="5"
                                                                        type="text" errorMessage="Please enter your name"
                                                                        maximumErrorMsg="You have exceeded maximum allowed
                                                                        characters" allowedCharacterErrorMsg="Only letters
                                                                        And spaces are allowed" sublabel="We will use this
                                                                        name to update your details." placeholder="Jhon Doe"
                                                                        label="Name" formControlName="name" ngDefaultControl>
                                                                        <co-radio id="myRadioButton"
                                                                        formControlName="radioButton" ngDefaultControl
                                                                        dataNames=&#39;Option 1,Option 2,Option 3&#39;
                                                                        helperText="Choose an Option" layout="vertical"
                                                                        errorMessage="please choose an option"
                                                                        [value]=" radioButtonComponent.value">
                                                                        <co-textarea formControlName="textArea" id="text" rows="10"
                                                                        cols="120" ngDefaultControl type="text"
                                                                        errorMessage="Please enter the message" validate
                                                                        <co-input-group ngDefaultControl formControlName="inputGroup"
                                                                        type="number" id="message" validate label="Your
                                                                        Annual Salary" variant="currency"
                                                                        helpertext="Please enter your gross annual
                                                                        salary" errorMessage="Please enter a value" >
                                                                        <co-select-menu ngDefaultControl formControlName="selectControl"
                                                                        id="myselectControl" title="Select-Menu"
                                                                        placeholder="please pick" errorMsg="Please pick
                                                                        an option" options="option 1,option 2,option
                                                                        3,label" label="The selected value is">
                                                                        <co-checkbox (change)="handleSingleCheckbox($event)"
                                                                        ngDefaultControl formControlName="checkbox"
                                                                        id="myCheckboxElement" singleCheckbox
                                                                        singleCheckboxLabel="Subscribe" text="Single
                                                                        Checkbox" errorMsg="Please check the checkbox
                                                                        before submitting">
                                                                        Agree to the Above conditions.<br>
                                                                        <button class="co-button co-button--primary"
                                                                <span> {{SignupForm.value | json}} The checkbox is {{getCheckboxStatus()}}</span>


                                                            import { Component, OnInit } from '@angular/core';
                                                        import { ControlContainer, FormControl, FormGroup,
                                                        FormGroupDirective, Validators } from '@angular/forms';
                                                        selector: 'app-root',
                                                        templateUrl: './app.component.html',
                                                        styleUrl: './app.component.scss'
                                                        export class AppComponent implements OnInit {
                                                        title = 'angular-design-system-testing';
                                                        public SignupForm!: FormGroup;
                                                        public nameComponent: FormControl = new FormControl(null,
                                                        public textAreaComponent:FormControl = new FormControl(null,
                                                        public inputGroupComponent:FormControl = new FormControl(null,
                                                        public checkboxComponent:FormControl = new FormControl(null,
                                                        selectedValue: string = '';
                                                        selectedOption: string = ''; // Initialize the selected option
                                                        radioButtonComponent: FormControl = new FormControl(null,
                                                        selectControlComponent: FormControl = new FormControl(null,
                                                        // Function to handle radio button change
                                                        handleRadioChange(event: any) {
                                                        this.selectedOption = event.detail;
                                                        this. radioButtonComponent.setValue(this.selectedOption);
                                                        selectMethod(event: any){
                                                        return this.singleCheckboxValue?'checked':'unchecked';
                                                        this.SignupForm = new FormGroup({
                                                        name: this. nameComponent,
                                                        radioButton: this. radioButtonComponent,
                                                        textArea:this. textAreaComponent,
                                                        inputGroup:this. inputGroupComponent,
                                                        selectControl:this. selectControlComponent,
                                                        checkbox:this. checkboxComponent
                                                        console.log('form works');

The above steps will ensure that the form components work well in Angular application too and has been checked with Chrome and Edge browsers.


We use Wave, Accessibility insights and Lighthouse for testing of the

components. The above accessibility tools do not provide any issues with the

Angular unless there are any accessibility issues in the library code.