3

I am developing an application using Angular2. I have a component with the following template:

<div>
  <router-outlet></router-outlet>
</div>

Can someone please help me how to load an external URL 'www.example.com' in this div?

UnderWood
  • 803
  • 3
  • 12
  • 23

2 Answers2

2

Just create a component to render inside <ng-outlet> by using the routing config. Then you component template inside should have an <iframe> pointing to your external site.

import {Component, OnInit} from '@angular/core';

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

export class ExternalPageComponent implements OnInit {

    title = 'app works!';

    constructor(private _stellarService: StellarService) {
    }

    ngOnInit(): void {
    }

}

Then your component template should look like

<div>
    <iframe src="yourexternalpage url"></iframe>
</div>

Having a code like the one above, only remaining step if to configure a route in your routing.

mspasiuk
  • 602
  • 1
  • 7
  • 23
  • 2
    if the external app have set options to deny rendering in a frame, will this solution work? Also, what risks are posed by opening the app in a frame. If we set the x-frame options to include certain domains, will it help – aprajitha Jul 13 '18 at 22:20
0

did you get answer for this ?

You can have a component as mentioned here . Import and add it to your NgModule; After that import it in the page you want and use the selector instead of <router-outlet>.

Community
  • 1
  • 1
Relativity
  • 6,690
  • 22
  • 78
  • 128