Search code examples
angularembedtiktok

Angular - Cannot pass data into blockquote


I cannot pass data to the blockquote tag in the 2 attributes cite and data-video-id.

My code:

<blockquote class="tiktok-embed"
            cite="{{itemVideo.link}}"
            data-video-id="{{itemVideo.video_id}}" style="max-width: 605px;min-width: 325px;">
   <section>
     <a target="_blank" title="{{influencer.socialName}}"href="{{influencer.socialLink}}">{{influencer.socialName}}</a>
   </section>
</blockquote>

Response error:

Can't bind to 'cite' since it isn't a known property of 'blockquote'. ("ng-container *ngIf="show">
              <blockquote class="tiktok-embed"
                          [ERROR ->]cite="{{itemVideo.link}}"
                          data-video-id="{{itemVideo.video_id}}" style="max"):

Solution

  • I have find solution

    tiktok.component.html

    <div [innerHTML]="tiktokDetailVideo"></div>
    

    titkok.component.ts

    import { Component, OnInit, Input, OnChanges, SimpleChanges, ViewChild, ElementRef } from '@angular/core';
    import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
    import { NgxSpinnerService } from 'ngx-spinner';
    
    export class TiktokVideoComponent implements OnInit, OnChanges {
     @ViewChild('videoDetail') private videoDetail: ElementRef;
     tiktokDetailVideo: any;
     isClickVideo = false;
     itemVideo;
     listPostVideo = [];
    
     constructor(
        private spinner: NgxSpinnerService,
        private sanitizer: DomSanitizer,
      ) {}
     ngOnInit() {}
     ngOnChanges(changes: SimpleChanges) {}
    
     detailPostVideo(post) {
        this.isClickVideo = true;
        this.itemVideo = post;
        this.tiktokDetailVideo = this.renderVideoTiktok(post);
        this.loadScript('https://www.tiktok.com/embed.js').then(status => {
          if (status === 'loaded') {
            this.show = true;
          }
        });
        if (this.type === 'tiktok') {
          this.spinner.show();
        }
        setTimeout(() => {
          const element = document.getElementById(post.id + '-video-post');
          if (element) {
            this.listVideoPost.nativeElement.scrollTop = element.offsetTop - 200;
          } else {
            this.listVideoPost.nativeElement.scrollTop = -30;
          }
          if (this.videoDetail) {
            this.videoDetail.nativeElement.scrollTop = -30;
          }
        }, 700);
        setTimeout(() => {
          this.spinner.hide();
        }, 3000);
      }
    
     renderVideoTiktok(post) {
        const html = '<blockquote class="tiktok-embed" cite="' + post.link + '" '
        + 'data-video-id="' + post.videoId + '" style="max-width: 605px;min-width: 325px; margin: 0 auto;" > <section> '
        + '<a target="_blank" title="' + post.socialName + '" href="' + post.socialLink + '">'
        + '@' + post.socialName + '</a> '
        + '</section> '
        + '</blockquote>';
        return  this.sanitizer.bypassSecurityTrustHtml(html);
      }
    }