Modus Angular Components: moduswebcomponents-angular

This library was generated with Angular CLI version 19.0.0.

The components in this library were programmatically generated using the StencilJS Angular Framework Integration.

Installation

• Install the Modus Angular Components Library and its Modus Web Component peer dependency npm install @trimble-oss/moduswebcomponents @trimble-oss/moduswebcomponents-angular

• Add the following snippet to your main.ts (or any main module)

  import { defineCustomElements } from '@trimble-oss/moduswebcomponents/loader';
  
  defineCustomElements();

• Add the following snippet to your app.module.ts (or any app module)

  import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  
  @NgModule({
    ...
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })

Example Usage

• Use a modus button in your app.component.html

  <modus-wc-button color="primary" [disabled]="false">Modus Button</modus-wc-button>

Build

To rebuild the Modus Angular Components you need to perform the following steps:

• From the ./integrations/angular/ng19 project directory run npm install then npm run build

Referencing a local build of modus-wc

Using npm link

• If you want to reference a local build of modus-wc you can run npm link from the modus-wc-2.0 root directory and then npm link @trimble-oss/moduswebcomponents from the ng19 directory.

Using npm pack

• You can also run npm pack from the modus-wc-2.0 root directory and then npm install path/to/modus-wc-tarball.tgz from ng19 directory.

Debugging Locally

To use the Modus Angular components locally for debugging and other purposes:

• From ./ng19 project directory run npm run build
• From ./ng19 project directory run npm pack ./dist/trimble-oss/moduswebcomponents-angular
  • This will generate a tarball of the library: trimble-cms-modus-wc-angular-0.0.1-ng19.tgz

You can now test the build locally with any Angular project by running npm install path/to/trimble-cms-modus-wc-angular-0.0.1-ng19.tgz and following the installation steps.