How to use the @egjs/flicking-plugins.AutoPlay function in @egjs/flicking-plugins

import { Component, OnInit } from '@angular/core';
import { Fade, AutoPlay} from '@egjs/flicking-plugins';
import { Plugin } from '@egjs/flicking';

@Component({
  selector: 'demo-autoplay',
  templateUrl: './autoplay.component.html',
  styleUrls: ['../app.component.css', './autoplay.component.css']
})
export class AutoplayComponent implements OnInit {
  plugins: Plugin[] = [new Fade(), new AutoPlay(2000, 'NEXT')];

  constructor() { }

  ngOnInit() {
  }
}

import * as React from "react";
import Flicking from "../react-flicking/Flicking";
import { insertCode } from "../utils";
import { Fade, AutoPlay } from "@egjs/flicking-plugins";
import "../css/plugins.css";

export default class AutoPlayDemo extends React.Component<{}> {
  private plugins = [new Fade(), new AutoPlay(2000, "NEXT")];
  public render() {
    return (
      <div id="autoplay">
      <h1>AutoPlay<a href="https://naver.github.io/egjs-flicking-plugins/release/latest/doc/eg.Flicking.plugins.AutoPlay.html">API</a></h1>
      <ul>
          <li>You can set flicking to move to the next/previous panel periodically.</li>
      </ul>
      
          <div></div></div>

data() {
    return {
      plugins: [new Fade(), new AutoPlay(2000, "NEXT")],
      code0: `
    <div class="panel">
      <img src="https://naver.github.io/egjs-flicking/images/bg01.jpg">
    </div>
    <div class="panel">
      <img src="https://naver.github.io/egjs-flicking/images/bg02.jpg">
    </div>
    <div class="panel">
      <img src="https://naver.github.io/egjs-flicking/images/bg03.jpg">
    </div>
  `,
    }