CODEWITHSUNDEEP
javascriptangulartypescript
Ana_30
Ana_30

Reputation: 375

how to open a link and contain it within a div

I would like to click on a link and open it inside a div on my page.

Here's the Stackblitz!

<div class="container">
  <ol>
    <li>
      <a href="www.company.com/projects">projects</a>
    </li>
    <li>
      <a href="www.company.com/tasks">tasks</a>
    </li>
    <li>
      <a href="www.company.com/notifications">notifications</a>
    </li>
    <li>
      <a href="www.company.com/overview">overview</a>
    </li>
  </ol>
</div>

When a link is clicked, the page should open within the container div, without the address bar.

UPDATE - If these links were internal to the company, would an I frame still be the right way to go?

Upvotes: 0

Views: 2740

Answers (4)

Saif Jerbi
Saif Jerbi

Reputation: 675

You can add an iframe to your container. By clicking the link, you have to update the iframe.src attribut to fill your clicked link

I have update the example for you stackblitz:


import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  link;

  constructor(private sanitizer: DomSanitizer) { }

  openLink(url) {
    this.link = this.sanitizer.bypassSecurityTrustResourceUrl(
      url
    )
  }
}

Html : 


<hello name="{{ name }}"></hello>

<p>When a link is clicked, for example "Google", the page<br>
  should open inside the orange div (without the address bar).</p>

<div class="container">
  <ol>
    <li>
      <div (click)="openLink('www.google.com')">Google</div>
    </li>
    <li>
      <div (click)="openLink('www.amazon.com')">Amazon</div>
    </li>
    <li>
      <div (click)="openLink('www.linkedin.com')">Linkedin</div>
    </li>
    <li>
      <div (click)="openLink('www.twitter.com')">twitter</div>
    </li>
  </ol>
  <iframe [src]="link" *ngIf="link"></iframe>
</div>

Upvotes: 5

Ian
Ian

Reputation: 329

I'm assuming you're wanting to "embed" a webpage within that div, so to speak.

This can be accomplished using an iframe.

Place the iframe within your div, for example, to contain it to the positioning of that div.

<div>
  <iframe src="example"></iframe>
</div>

Upvotes: 1

banderson
banderson

Reputation: 121

What you are describing is an Iframe. Since you tagged the question with Angular I'm going to assume you want to do it in Angular. Here is a related thread. [enter link description here][1]

How to set iframe src in Angular 2 without causing `unsafe value` exception?

Upvotes: 1

jacob13smith
jacob13smith

Reputation: 929

Use an iframe instead of a div:

<iframe src="your-link-here"></iframe>

Upvotes: 1

Related Questions