Angular Replaceable Nav Items Component Chat Icon #1730

3 Answer(s)

• 

  0

  bunyamin created 2 years ago

  Hello,

  The NavItemsComponent from @volo/abp.ng.theme.lepton package utilizes a service, NavItemsService to display components from different modules.

  To implement such logic into your own nav-items.component, insert this service into your component as follows:

  import { NavItemsService, NavItem } from '@abp/ng.theme.shared';
  
  @Component({
    selector: 'app-nav-items',
    templateUrl: './nav-items.component.html',
  })
  export class NavItemsComponent {
    trackByFn: TrackByFunction<NavItem> = (_, element) => element?.id;
  
    constructor(public readonly navItems: NavItemsService) {}
  }
  

  And, in your template you can use ngComponentOutlet directive to render these components.

  <ul class="navbar-nav toolbar-nav">
    <ng-container *ngFor="let item of navItems.items$ | async; trackBy: trackByFn">
      <ng-container *ngIf="item.visible()">
        <li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy">
          <ng-container
            *ngIf="item.component; else htmlTemplate"
            [ngComponentOutlet]="item.component"
          ></ng-container>
  
          <ng-template #htmlTemplate>
            <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
          </ng-template>
        </li>
      </ng-container>
    </ng-container>
  </ul>
  

  Save Cancel
• 

  0

  wazbek created 2 years ago

  Thanks bunyamin.

  I will try that out.

  Save Cancel
• 

  1

  wazbek created 2 years ago

  Thanks bunyamin.

  I was able to get the chat icon displaying with the answer you provided.

  Regards,

  Warick

  Save Cancel