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 },
}