@amalitech-org/design-system-angular v0.1.3

Amalitech Design System and Angular

This is the angular components wrapper for amalitech-design-system

Setup

First, install the package:

npm install @amalitech-org/design-system
npm install @amalitech-org/design-system-angular

Then load the component library in main.ts:

// src/main.ts
import { applyPolyfills, defineCustomElements } from "@amalitech-org/design-system/loader";

applyPolyfills().then(() => {
  defineCustomElements(window);
});

After that, load the CSS in the angular.json config file:

// angular.json
{
  "build": {
    "styles": ["@amalitech-org/design-system/dist/amalitech-design-system/amalitech-design-system.css"]
  }
}

In order for Angular to handle non-Angular element names, include the wrapper at the root of your project: src/app/app.component.ts:

// src/app/app.component.ts
import { ADSAngularWrapperModule } from "ads-angular-wrapper";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [ADSAngularWrapperModule],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  // ..
}

You should now be able to use ADS components in your templates:

<div>
  <amalitech-button>Click!</amalitech-button>
</div>

For more information view our full documentation on Storybook