Update HTML on click event angular

Question

I want to update html on click event. With jquery it was very easy to do with html() method. but with angular I am little confused with it.

.ts file

  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>

I simply want to update the html on click event.

Alexis · Accepted Answer · 2020-10-08 07:47:41Z

3

In your case I will use [ngClass], because the only thing you change is the name of one of the classes of your span element. So modifying the entire html element is probably not usefull.

ts file

className: string = 'wistia_async_8zc2rphave';

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

html file

<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>

I have created a little stackblitz to show you an example of this solution.

answered Oct 8, 2020 at 7:47

Alexis

1,7941 gold badge18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

V.Tur · Accepted Answer · 2020-10-08 07:43:19Z

2

If you want to put whole html into angular page:

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

yourHtmlVariable - you can change it by click in your controller. If you need just change your class:

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

or use [ngClass] with conditions https://angular.io/api/common/NgClass

answered Oct 8, 2020 at 7:43

V.Tur

1,44715 silver badges22 bronze badges

Collectives™ on Stack Overflow

Update HTML on click event angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related