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';
@NgModule({
schemas :[CUSTOM_ELEMENTS_SCHEMA]
})
- Run ng serve
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob":"**/*",
"input":"path/to/assets",
"output": "./assets"
}
],
"styles": [
"src/styles.css",
"path/to/styles"
],
"scripts": [
"path/to/compound.js",
"path/to/index.js"
]
]
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';
App.component.html
- Write a reactive form using the required co-components
- 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" >
App.component.ts
- In the app.component.ts file add the following into the class appComponent, It would look like the code provided below
- Add the code below to the ngOnInit() method
ngOnInit(){
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.
App.component.html
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">
</co-radio>
App.component.ts
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.
App.component.html
<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">
</co-radio>
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>
<br/>
<form [formGroup]="SignupForm" (ngSubmit)="onSubmit()">
<div>
<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-input>
<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">
</co-radio>
<co-textarea formControlName="textArea" id="text" rows="10"
cols="120" ngDefaultControl type="text"
errorMessage="Please enter the message" validate
label="Textarea">
</co-textarea>
<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-input-group>
<co-select-menu ngDefaultControl formControlName="selectControl"
(change)="selectMethod($event)"
[value]="selectControlComponent.value"
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-select-menu><br>
<co-checkbox (change)="handleSingleCheckbox($event)"
ngDefaultControl formControlName="checkbox"
id="myCheckboxElement" singleCheckbox
singleCheckboxLabel="Subscribe" text="Single
Checkbox" errorMsg="Please check the checkbox
before submitting">
</co-checkbox>
Agree to the Above conditions.<br>
<button class="co-button co-button--primary"
type="submit">Submit</button>
</div>
</form>
<span> {{SignupForm.value | json}} The checkbox is {{getCheckboxStatus()}}</span>
</div>
</div>
App.component.ts
import { Component, OnInit } from '@angular/core';
import { ControlContainer, FormControl, FormGroup,
FormGroupDirective, Validators } from '@angular/forms';
@Component({
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,
[Validators.required]);
public textAreaComponent:FormControl = new FormControl(null,
[Validators.required]);
public inputGroupComponent:FormControl = new FormControl(null,
[Validators.required]);
public checkboxComponent:FormControl = new FormControl(null,
[Validators.required]);
selectedValue: string = '';
selectedOption: string = ''; // Initialize the selected option
singleCheckboxValue:boolean=false;
radioButtonComponent: FormControl = new FormControl(null,
[Validators.required]);
selectControlComponent: FormControl = new FormControl(null,
[Validators.required]);
// Function to handle radio button change
handleRadioChange(event: any) {
this.selectedOption = event.detail;
this. radioButtonComponent.setValue(this.selectedOption);
}
selectMethod(event: any){
this.selectedValue=event.detail;
this.selectControlComponent.setValue(this.selectedValue);
}
handleSingleCheckbox(event:any){
this.singleCheckboxValue=event.detail;
}
getCheckboxStatus():string{
return this.singleCheckboxValue?'checked':'unchecked';
}
ngOnInit(){
this.SignupForm = new FormGroup({
name: this. nameComponent,
radioButton: this. radioButtonComponent,
textArea:this. textAreaComponent,
inputGroup:this. inputGroupComponent,
selectControl:this. selectControlComponent,
checkbox:this. checkboxComponent
});
}
onSubmit(){
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.
Accesibility
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.