How can I display an iframe element only if it exists within an object in Angular?

Question

How can I display an iframe element only if it exists within an object in Angular?

I'm currently exploring options to specifically display the iframe element within a block of HTML content being sent to my Angular application.

While I can use a *ngIf directive in my template to check for the presence of the tag, I am unsure of how to isolate and only render the iframe from the content, excluding the rest of the HTML.

<div *ngIf="item.content.indexOf('iframe') > 0" class="item">
   <div (click)="this.navigateToPost(item.id)">
      <h2 [innerHTML]="item.title"></h2>
   </div>
   <div class="iframe-container"[innerHTML]="this.sanitized.bypassSecurityTrustHtml(item.content)">
   </div>
</div>

Within the

<div class="iframe-container"[innerHTML]="this.sanitized.bypassSecurityTrustHtml(item.content)"></div>

, I am looking for a method to exclusively display the iframe code from the item.content.

Does anyone have suggestions on how to approach this challenge effectively?

javascript angular typescript

Answer 1

Answer №1

To hide an iframe, you can assign it a specific class and then use CSS to hide it when necessary within your component logic.

Here is an example of how you can achieve this:

ngAfterViewInit() {
    (document.querySelector('.iframe-class') as HTMLElement).style.display = 'none'
}

Update:

If you only want to display the iframe and hide the rest of the content, you can use the CSS pseudo-class ':not()'

First, add a class:

<div [innerHTML]="html" ngClass=[{'my-class': condition}]></div>

Then in your CSS:

.my-class:not(.iframe-class) {
  display: none;
}

I have not tested this solution, so please let me know if it works for you.

Answer 2

To hide an iframe, you can assign it a specific class and then use CSS to hide it when necessary within your component logic.

Here is an example of how you can achieve this:

ngAfterViewInit() {
    (document.querySelector('.iframe-class') as HTMLElement).style.display = 'none'
}

Update:

If you only want to display the iframe and hide the rest of the content, you can use the CSS pseudo-class ':not()'

First, add a class:

<div [innerHTML]="html" ngClass=[{'my-class': condition}]></div>

Then in your CSS:

.my-class:not(.iframe-class) {
  display: none;
}

I have not tested this solution, so please let me know if it works for you.

How can I display an iframe element only if it exists within an object in Angular?

Answer №1

Similar questions

How to Create a Speech Bubble in SVG Using SnapSVG

Tips on creating a script for detecting changes in the table element's rows and columns with the specified data values

Why does the ng-click function fail to execute when using the onclick attribute in AngularJS?

Placing the video at the center of the background image

Uploading files asynchronously in Internet Explorer 8

Acquiring the handle of ngComponentOutlet

The absence of typings.json in Typescript is creating an issue

Mongoose: When encountering a duplicate key error (E11000), consider altering the type of return message for better error handling

Utilize JavaScript to send login information to a website

Execute javascript whenever the page is being loaded

Steps for incorporating moment.js into an Angular 2 project

Having troubles with the xml2json jQuery plugin's functionality?

What steps should be taken to create a two-column table from a given list of items?

Combining two request.get functions into a single one

Angular 4 - Seeking clarification on the usage of *ngComponentOutlet

Error with Webdriver/FXDriver utils.js leading to Firefox unresponsive script issue

Guide on populating a series of rectangles in a line based on values stored in an array using d3.js

Gather information from users using Node.js and integrate it with Stripe

Updating line connections between objects in Three.js while rendering

Is there a gentle approach to transferring calendar event variables in JavaScript?