Use with Angular

Check out the entire Angular example code in our examples repository.

First, import the web components build of the widget into your component.ts file:

app.component.ts

import '@swing.xyz/ui/web-components'

Add the widget CSS file to your angular.json (See the full file here):

angular.json

{
  "projects": {
    "angular": {
      "architect": {
        "build": {
          "options": {
            "styles": ["@swing.xyz/ui/theme.css"]
          }
        }
      }
    }
  }
}

Add the CUSTOM_ELEMENTS_SCHEMA to your module.ts file:

app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]

  // ...other module options
})

Finally, add the widget to your component.html file:

app.component.html

<swing-swap projectId="angular-example"></swing-swap>

Additionally, you may need to load polyfills for the widget to work properly:

polyfills.ts

window.global = window

window.process = {
  env: { DEBUG: undefined },
}