angular2 – Angular 7 – Router-output display for the Nav Child component compared to the iframe

I have created a data-based display of web browsing and Angular 7 applications containing navigation items to display when a navigation item is selected.

I have the following navigation interface:

NavItem interface {
title: chain;
icon: chain;
link: string;
pages ?: NavItem[];

Where this can be implemented like this for an angular route:

Title: "Home",
icon: faCoffee, // from Material CSS
link: "home", // note that this is an angular route
pages: null

Or like this:

Title: "Company Name",
icon: & # 39; faCompany & # 39 ;,
link: http: // ;, // Note that this is an external URI
pages: null

I have the following in nav.component.html:

    // (2)

In nav.component.ts

NavComponent export class {
rawLink: string = "/";

public browsing list: NavItem[];

changeLink (link: string) {// (1)
this.rawLink = link;

The app-content-display directive is defined as follows:


selector: & # 39; app-content-display & # 39; // (2)
templateUrl: & # 39; ./ content-display.component.html & # 39;
styleUrls: ['./content-display.component.scss']
The ContentDisplayComponent export class implements OnInit {

private _link = & # 39 ;;
isAngularLink = true;

set hyperlink (hyperlink: string) {// When a trigger is triggered by (1), the value is checked to determine whether it is an angular route. The output then decides to display an angular output router or an iframe.
this._link = hyperlink;
this.isAngularLink = this.checkIfAngularLink ();

if (this.isAngularLink) {
this.router.navigate ([`${this._link}`])

get a hyperlink (): string {
return this._link;

trustedLink = () => {
return this.sanitizer.bypassSecurityTrustResourceUrl (this.hyperlink); // must be a function as opposed to a property that gets

constructor (private disinfectant: DomSanitizer, private router: router) {}

ngOnInit () {}

checkIfAngularLink () {

if (this._link.indexOf (& # 39; & # 39;)> 0) {
returns false;

return true;

Sure content-display.component.html:

The final result is:

The parent component (nav.component) displays a child component (content-display.component). When a link is clicked on a parent component, the hyperlink property of the child component receives the link and checks whether it is an angular path relative to resources. external.

  1. If a user clicks on a navigation link that points to an internal angular page, Router-Socket will display the output
  2. If a user clicks on a navigation link that points to an external URI, an iframe will be called to display the result.

I think the child component (content-display.component) may know too much and overdo it and may need refactoring. However, I do not expect the child component to be reused by other areas of the Web application.