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:

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

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

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

Add the CUSTOM_ELEMENTS_SCHEMA to your module.ts file:

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:

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

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

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

Customizations

Connect your Project

Learn how to setup a Swing Platform project to configure the chains, tokens and integrations used by the widget.

Configure an environment

Learn how to configure the widget to use production and testnet environments.

Customize the theme

Learn how to customize the colors, fonts and sizing used by the widget.