How to use @egjs/flicking-plugins - 7 common examples

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

data() {
    return {
      plugins: [new Parallax("img", 4)],
      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>
`
    }
  },

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

export default class ParallaxDemo extends React.Component<{}> {
  private plugins = [new Parallax("img", 4)];
  public render() {
    return (
      <div id="parallax">
        <h1>Parallax <a href="https://naver.github.io/egjs-flicking-plugins/release/latest/doc/eg.Flicking.plugins.Parallax.html">API</a></h1>
        <ul>
          <li>Parallax effect will be applied to each panel while moving.</li>
        </ul>
        
          <div></div></div>