Как добавить анимацию в amcharts LineSeries в среде Angular 8

Question

Я довольно новичок как в Angular 8, так и в amcharts, но работаю над реализацией этого урока https://www.amcharts.com/docs/v4/tutorials/animating-map-lines-with-css/ в моем Angular 8 проекте. MapChart успешно рендерится, однако, когда я добавляю MapLineSeries, он не анимирует линии, как показано в руководстве. Я думаю, что правильным способом решения этой проблемы является добавление функции Keyframes к определению Animations в моем компоненте, но я не могу добавить triggerName и выражение к элементу HTML, так как он динамически создается из компонента. Я включил пример анимации в коде. Спасибо за ваше руководство!

component.ts

import { Component, OnInit, NgZone } from "@angular/core";
import {
  trigger,
  state,
  style,
  animate,
  transition,
  keyframes
} from '@angular/animations';
import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

@Component({
  selector: 'app-amcharts-map-miller',
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ],
  templateUrl: './amcharts-map-miller.component.html',
  styleUrls: ['./amcharts-map-miller.component.scss']
})
export class AmchartsMapMillerComponent implements OnInit {
  isReady = true;

  constructor(private zone: NgZone) { }

  ngOnInit() {
  }

  toggleMapReady() {
    this.isReady = !this.isReady;
  }

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      // Create map instance
      var chart = am4core.create("chartdiv", am4maps.MapChart);

      // Set map definition
      chart.geodata = am4geodata_worldLow;

      // Set projection
      chart.projection = new am4maps.projections.Miller();

      // Create map polygon series
      var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

      // Make map load polygon (like country names) data from GeoJSON
      polygonSeries.useGeodata = true;

      // Configure series
      var polygonTemplate = polygonSeries.mapPolygons.template;
      polygonTemplate.tooltipText = "{name}";
      polygonTemplate.fill = am4core.color("#74B266");

      // Remove Antarctica
      polygonSeries.exclude = ["AQ"];

      // Add some data
      polygonSeries.data = [{
        "id": "US",
        "name": "United States",
        "value": 100
      }, {
        "id": "FR",
        "name": "France",
        "value": 50
      }];

      chart.events.on("ready", (ev) => {
        console.log(ev);

        // Add line series
        var lineSeries = chart.series.push(new am4maps.MapLineSeries());
        lineSeries.mapLines.template.strokeWidth = 4;
        lineSeries.mapLines.template.stroke = am4core.color("#e03e96");
        lineSeries.mapLines.template.nonScalingStroke = true;

        var line = lineSeries.mapLines.create();
        line.multiGeoLine = [[
          { "latitude": 48.856614, "longitude": 2.352222 },
          { "latitude": 40.712775, "longitude": -74.005973 },
          { "latitude": 49.282729, "longitude": -123.120738 }
        ]];
        line.id = "myline";

        line.setClassName();

        this.zone.run(() => this.toggleMapReady());

      })
    })
  }

}

компонент. html

<p>amcharts-map-miller works! {{ isReady ? 'open' : 'closed' }}</p>
<div id="chartdiv" [@openClose]="isReady ? 'open' : 'closed'"></div>

component.s css

#chartdiv {
    width: 100%;
    height: 400px;
  }
  
  .amcharts-myline path {
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 500%;
    stroke-dasharray: 0; /* fixes IE prob */
    stroke-dashoffset: 0; /* fixes IE prob */
    -webkit-animation: am-draw 40s;
    animation: am-draw 40s;
    //animation-duration: 40s;
  }
  @-webkit-keyframes am-draw {
    0% {
      stroke-dashoffset: 500%;
    }
    100% {
      stroke-dashoffset: 0%;
    }
  }
  @keyframes am-draw {
    0% {
      stroke-dashoffset: 500%;
    }
    100% {
      stroke-dashoffset: 0%;
    }
  }