I'm having trouble embedding an iframe that comes from an API endpoint in Angular 4.
If I want to embed an iframe in an Angular component it works fine:
<div class="artist-detail" *ngIf="artist">
<iframe src="https://open.spotify.com/embed?uri=spotify:album:3EwfQtjvyRAXsPWAKO5FDP" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</div>
but I'm working with a headless CMS (Drupal 8) on the backend so that the client can add a different iframe for each artist.
Usually I just user Angular's [innerHTML] to render text I get from the backend:
<div class="artist-detail-bio" [innerHTML]="artist.bio"></div>
but when I try it with the iframe, the DOM reads it as a string. For example, here's what shows up in the devtools:
I tried piping innerHTML to remove the first and last characters of the string, thinking it'd remove the quotes, but nope.
