Open Closed

Angular Replaceable Nav Items Component Chat Icon #1730


User avatar
0
wazbek created

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)
  • User Avatar
    0
    bunyamin created

    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>
    
  • User Avatar
    0
    wazbek created

    Thanks bunyamin.

    I will try that out.

  • User Avatar
    1
    wazbek created

    Thanks bunyamin.

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

    Regards,

    Warick

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19