How to Add WheelWidget Script to Angular Application

1. Open your Angular application in your preferred code editor.
2. In the app.component.html file, add the following code where you want the widget to appear:

<script    src="https://files.wheelwidget.com/wheel-widget.umd.js"    async defer></script><wheel-widget id="YOUR_ID"></wheel-widget>

Make sure to replace "YOUR_ID" with your actual widget ID, which you can find in the admin panel of your WheelWidget account.

3. Save your changes to the app.component.html file.
4. In the app.component.ts file, import the "AfterViewInit" module from the "@angular/core" package.

import { Component, AfterViewInit } from '@angular/core';

5. Add the "AfterViewInit" module to the component class:

export class AppComponent implements AfterViewInit {

6. Implement the "ngAfterViewInit" method, which is triggered once the view is initialized:

ngAfterViewInit() {  const script = document.createElement('script');  script.src = 'http://files.wheelwidget.com/wheel.js';  script.setAttribute('data-id', 'YOUR_ID');  document.body.appendChild(script);}

Make sure to replace "YOUR_ID" with your actual widget ID, which you can find in the admin panel of your WheelWidget account.

7. Save your changes to the app.component.ts file.
8. Serve your Angular application using the "ng serve" command.

That's it! The WheelWidget script should now be installed on your Angular application. If you encounter any issues or have any questions, feel free to contact us.

We hope this instruction was helpful in adding the WheelWidget script to your Angular application. If you have any feedback or suggestions, please let us know.