1

For example say I have a sidenav and need to add different items to it based on the page that the user is on. Can I do that with a portal?

This is my side nav. I was thinking depending on the page the developer can pass in a component and it shows on the {{ComponentGoesHere}} portion of the side nav

<md-sidenav-container fullscreen>
  <md-sidenav #sidenav mode="push" class="app-sidenav">
    <md-toolbar color="primary">
      <span style="flex: 1 1 auto"></span>
      <button md-icon-button (click)="sidenav.toggle()" class="md-icon-button sidenav-toggle-button" [hidden]="!sidenav.opened">
        <md-icon aria-label="Menu" class="material-icons">close</md-icon>
      </button>
    </md-toolbar>
<div>
**{{ComponentGoesHERE}}**
</div>
<h2>Navigation</h2>
    <md-nav-list>
      <a md-list-item class="sidenav-link" [routerLink]="['/comp1']" (click)="sidenav.toggle()">
        <md-icon md-list-icon>account_balance</md-icon>
        <span class="title" md-line>comp1</span>
        <span md-line class="secondary">test</span>
      </a>
      <a md-list-item class="sidenav-link" [routerLink]="['/comp2']" (click)="sidenav.toggle()">
        <md-icon md-list-icon>android</md-icon>
        <span class="title" md-line>comp2</span>
        <span md-line class="secondary">test</span>
      </a>
    </md-nav-list>
  </md-sidenav>
  <md-toolbar id="appToolbar" color="primary">
    <button md-icon-button (click)="sidenav.toggle()" class="md-icon-button sidenav-toggle-button" [hidden]="sidenav.opened">
                <md-icon aria-label="Menu" class="material-icons">menu</md-icon>
        </button>
    <h1>
      <a class="title-link">My Navigation Bar</a>
    </h1>
    <span style="flex: 1 1 auto"></span>
    <button id="button-logout" md-button>Log Out</button>
  </md-toolbar>
  <router-outlet></router-outlet>
</md-sidenav-container>

EDIT: Since the sidenav is global (exists in app component) is there a way to see if there is a portal component on a particular page load?

Lets say i navigate to a page called "reports". The portal see that reports has a report portal component and loads it to the side nav.

Then i navigate to transactions. The portal sees that transactions has a search function portal component and loads it.

Then i go to a settings page and the portal sees there is no component so it hides itself.

I was hoping it was possible this way so that I only have to reference these components as needed.

CodeMan03
  • 570
  • 3
  • 18
  • 43
  • @ChristopherPeisert No that is a bit different. I am looking for work with portals. I just need to know how to subscribe to each page and if there is a portal component on that page then put it in the portal. – CodeMan03 Feb 10 '20 at 02:28

2 Answers2

2

I think there are a couple of different ways you can achieve this.

One is with the Angular Router. You can have several different Router Outlets in your App, and in your Router configuration you can specify what component to show based on the URL, and to what Router Outlet to send the component. https://www.techiediaries.com/angular-router-multiple-outlets/

If you want to dynamically create components it can be done with the Compoment Factory Resolver. Be aware though that the Angular Factory Resolver can be a bit complicated. https://angular.io/guide/dynamic-component-loader

A third solution that might help you is the Portals from the Angular Cdk, so you should look into them to. They let you render a component from one part of your page to another. https://material.angular.io/cdk/portal/overview

(From what I have heard it might become easier to create dynamic component in the near future now that Angular 9 and Ivy has been released.)

SnorreDan
  • 2,740
  • 1
  • 14
  • 17
  • Portals looks interesting. Since the sidenav is global (exists in app component) is there a way to see if there is a portal component on a particular page load? Lets say i navigate to a page called "reports". The portal see that reports has a report portal component and loads it to the side nav. Then i navigate to transactions. The portal sees that transactions has a search function portal component and loads it. I was hoping it was possible this way so that I only have to reference these components as needed. – CodeMan03 Feb 10 '20 at 01:22
0

I don't think it is possible to add it dynamically, but you can use ngIf to control its runtime existence. If ngIf codition is not met, it will not appear not exist or affect other parts of you html.

Dani Toker
  • 406
  • 6
  • 19