Installation

To get Canopy up and running in Angular, you'll need to install the relevant packages and configure your app to use web components.

1. Install NPM packages

   npm install @canopy-web/core @canopy-web/angular

2. Configure your app module to import the angular module and custom elements loader for canopy, calling the loader

   import { CanopyAngularModule } from '@canopy-web/angular';
   import { defineCustomElements } from '@canopy-web/core/loader';
   
   defineCustomElements();

   Follow up by adding the Canopy module to your imports

   @NgModule({
   imports: [
     CanopyAngularModule,
     ...
   ],
   ...

3. Modify you angular json to load assets and css from Canopy, adding the following into the build options for your project

   "assets": [
      {
        "glob": "**/*",
        "input": "node_modules/@canopy-web/core/dist/core/webfonts",
        "output": "/webfonts/"
      },
      ...
    ],
    "styles": [
      "node_modules/@canopy-web/core/dist/core/core.css",
      ...
    ],
    ...

And that's it! You should now be able to use Canopy within your angular application.