Error parsing data-flickity on carousel: SyntaxError: Unexpected token o in JSON at position 1

[cgilbe27]

<flickity class="lifestyleFlick" *ngIf="imageSet" [images]="imageSet" [options]="flickityOptions"></flickity> Being called on the component through a directive(which is where the error comes from)

typescript of directive

import { AfterViewInit, Component, Inject, Input, PLATFORM_ID, ViewChild } from "@angular/core";
declare const Flickity: any;

@Component({
  selector: "flickity",
  templateUrl: "./flickity.component.html",
})
export class FlickityComponent implements AfterViewInit {
  @Input() public images: string[] = [];
  @Input() public options = { wrapAround: true, autoPlay: 5000, imagesLoaded: true }; // Default options
  @ViewChild("flickity") public flickity: any;

  constructor(@Inject(PLATFORM_ID) private platformId: object) { }

  public ngAfterViewInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.flickity = new Flickity(".carousel", this.options);
    }
  }
}```

HTML of directive
```<div class="carousel" [attr.data-flickity]="options" #flickity>
  <div *ngFor="let image of images" class="carousel-cell">
    <img src="{{image}}" class="carousel-image" />
  </div>
</div>```

[desandro]

If you're using flickity with Angular I recommend using a proper directive for Flickity like angular-flickity