Je veux mettre à jour html sur l'événement de clic. Avec jquery, c'était très facile à faire avec la méthode html(). mais avec angulaire je suis peu confondu avec cela.

Fichier .ts

  updateVideoId(videoId: string) {
    let html;
    html = `<span class="wistia_embed wistia_async_${videoId} popover=false popoverAnimateThumbnail=true" style="display:inline-block;height:700px;position:relative;width:80%">nbsp;</span>`; 
  }

<mat-button (click)="updateHtml('asdfasd65f4823asdf')"></mat-button>
<div class="embed-responsive embed-responsive-16by9">
      <span class="wistia_embed wistia_async_8zc2rphave popover=false popoverAnimateThumbnail=true" style="display:inline-block;height:700px;position:relative;width:80%">nbsp;</span>
</div>

Je veux simplement mettre à jour le html sur l'événement de clic.

0
Santosh 8 oct. 2020 à 10:31

2 réponses

Meilleure réponse

Dans votre cas, j'utiliserai [ngClass], car la seule chose que vous changez est le nom de l'une des classes de votre élément span. Donc, modifier tout l'élément html n'est probablement pas utile.

fichier ts

className: string = 'wistia_async_8zc2rphave';

updateHtml(videoId : string){
  this.className='wistia_async_'+videoId
}

fichier html

<mat-button (click)="updateHtml('asdfasd65f4823asdf')"></mat-button>
<div class="embed-responsive embed-responsive-16by9">
  <span class="wistia_embed" [ngClass]="className" popover=false popoverAnimateThumbnail=true" style="display:inline-block;height:700px;position:relative;width:80%">nbsp;</span>
</div>

J'ai créé un petit stackblitz pour vous montrer un exemple de cette solution.

3
Alexis 8 oct. 2020 à 07:47

Si vous voulez mettre du HTML entier dans une page angulaire:

<div class="embed-responsive embed-responsive-16by9" [innerHTML]="yourHtmlVariable"></div>

YourHtmlVariable - vous pouvez le changer en cliquant dans votre contrôleur. Si vous avez juste besoin de changer de classe:

<span [class]="yourClassName" style="display:inline-block;height:700px;position:relative;width:80%">nbsp;</span>

Ou utilisez [ngClass] avec des conditions https://angular.io/api/common/NgClass

2
V.Tur 8 oct. 2020 à 07:43