ABP Framework version: v4.3.0 UI type: Angular DB provider: EF Core Tiered (MVC) or Identity Server Separated (Angular): yes Exception message and stack trace: N/A Steps to reproduce the issue:
Hi
We have replaced the nav-items.component with our own component. We recently enabled the chat module in our application and now need to update our own nav-items.component to display the chat icon in the navigation bar
Could I please get the html and any other component code needed to be able to display this in our custom nav-items.component.
Regards,
Warick
3 Answer(s)
-
0
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>
-
0
Thanks bunyamin.
I will try that out.
-
1
Thanks bunyamin.
I was able to get the chat icon displaying with the answer you provided.
Regards,
Warick