how to set localhost path on iframe in angular 4

Question

Hi please help to solve the code. if I embed static HTML file that is stored in my project directory the iframe is not working when i embed live URL in the iframe the iframe is working fine

here my folder structure

src
|-app
|  |-components
|      |-template
|            |-template.component.html
|            |-template.component.ts
|-assets
|-templates
     |-template1
          |-index.html

template.component.html

<iframe [src]="getIframe()" frameborder="0" ></iframe>

template.component.ts

import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-template',
  templateUrl: './template.component.html',
  styleUrls: ['./template.component.css']
})

export class TemplateComponent implements OnInit {

  constructor(private sanitizer:DomSanitizer) { }

  ngOnInit() {
  }

  getIframe(){
    console.log('iframe');
    return this.sanitizer.bypassSecurityTrustResourceUrl('../../../templates/template1/index.html');
  }

}

Have you double-triple checked the location? Maybe try to put a temp file into the same folder? — Sonu Kapoor, Jan 09 '18 at 14:05
Add templates folder to .angular file? Access the folder from root directory not using .../..; recommended is making use of assets folder — rijin, Jan 09 '18 at 14:30
Yes I Put the html file in assets folder but it's not working — MDF, Jan 09 '18 at 15:17
Possible duplicate of [Angular 2/4: Add compiled component to an iframe](https://stackoverflow.com/questions/42875013/angular-2-4-add-compiled-component-to-an-iframe) — MDF, Feb 21 '18 at 05:32

score 2 · Answer 1 · answered Jan 30 '18 at 11:37

Make a file in root directory which saves an alias to filepath mappings, then call the function from that file by passing alias which will give you the path of the required file. Example:

    'use strict';
define([    
], function(){

    var baseUrl = '/dashboard/app'; // the url starting with this file

    var html = {
        'file1'     : 'file_1.html',
        'file2'     : 'app2/file_2.html'
    };

    function getHtml(alias) {
        if(html[alias]) {
            return baseUrl + html[alias];
        }
    };

    return {
        getHtml : getHtml
    }; });

Now require this file and call the getHtml function with the required file path , this gives you the accurate file path from home directory.

This should most probably work, try and let me know.

how to set localhost path on iframe in angular 4

1 Answers1