angular.stories.mdx

import { Meta, Story, Preview } from '@web/storybook-prebuilt/addon-docs/blocks.js';

Angular

Clarity Core is compatible with most JavaScript frameworks including Angular. You can try out Core in Angular today. To get the best experience building with Clarity we recommend using Clarity Angular which provides a suite of feature rich native Angular components.

To use Clarity with Angular follow the package installation instructions. Once installed add the @cds/angular package from npm.

npm install @cds/angular --save

Add the appropriate component modules needed for your aplication.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CdsAlertModule } from '@cds/angular/alert';

@NgModule({
  imports: [BrowserModule, CdsAlertModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

To set properties on a Component use the [property] binding syntax. To listen to events use the (event) binding syntax.

<!--
- status - attribute style hook
- [closable] - setting the 'closable' property on the element
- (closeChange) - listen for the 'closeChange' custom event
-->

<cds-alert status="info" [closable]="true" (closeChange)="log($event.detail)">
  Hello World
</cds-alert>

Example Apps