Open Closed

How to Add route or component inside profile menu in navbar #1925


User avatar
0
kaustubh.kale@ness.com created

ABP Framework version: v4.3.1 UI type: Angular

Hi I want add submenu inside profile menu . when user click on that it will need to redirect on that component.

PFA above in scrrenshot highlited yellow part i want to add one route .How can we achive.


4 Answer(s)
  • User Avatar
    0
    kaustubh.kale@ness.com created

    Hi Team

    Any Update On Above

  • User Avatar
    0
    kaustubh.kale@ness.com created

    Hi Team

    Kindly Give Update on above issue .Its required on urgent basis.

  • User Avatar
    0
    Mehmet created

    Hi,

    You need to replace the current user component to achieve this Follow the steps below to replace:

    • Create a module:
    yarn ng generate module current-user --module app
    
    • Create a component:
    yarn ng generate component current-user --export
    
    • Replace the generated current user module content with the following:
    import { CoreModule } from '@abp/ng.core';
    import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
    import { ThemeLeptonModule } from '@volo/abp.ng.theme.lepton';
    import { CurrentUserComponent } from './current-user.component';
    
    @NgModule({
      declarations: [CurrentUserComponent],
      imports: [CommonModule, ThemeLeptonModule, CoreModule, NgbDropdownModule],
      exports: [CurrentUserComponent],
    })
    export class CurrentUserModule {}
    
    • Replace the generated current-user.component.ts with the following:
    import {
      AuthService,
      ConfigStateService,
      EnvironmentService,
      NAVIGATE_TO_MANAGE_PROFILE,
      SessionStateService,
    } from '@abp/ng.core';
    import { Component, Inject, Optional } from '@angular/core';
    import {
      NAVIGATE_TO_MY_SECURITY_LOGS,
      OPEN_MY_LINK_USERS_MODAL,
    } from '@volo/abp.commercial.ng.ui/config';
    import { eThemeLeptonComponents } from '@volo/abp.ng.theme.lepton';
    
    @Component({
      selector: 'app-current-user',
      templateUrl: 'current-user.component.html',
    })
    export class CurrentUserComponent {
      currentUser$ = this.configState.getOne$('currentUser');
    
      selectedTenant$ = this.sessionState.getTenant$();
    
      currentUserImageComponentKey = eThemeLeptonComponents.CurrentUserImage;
    
      get smallScreen(): boolean {
        return window.innerWidth < 992;
      }
    
      get issuer() {
        return this.environment.getEnvironment().oAuthConfig.issuer;
      }
    
      constructor(
        @Inject(NAVIGATE_TO_MANAGE_PROFILE) public navigateToManageProfile,
        @Inject(NAVIGATE_TO_MY_SECURITY_LOGS) public navigateToMySecurityLogs,
        @Optional() @Inject(OPEN_MY_LINK_USERS_MODAL) public openMyLinkUsersModal,
        private authService: AuthService,
        private sessionState: SessionStateService,
        private configState: ConfigStateService,
        private environment: EnvironmentService,
      ) {}
    
      navigateToLogin() {
        this.authService.navigateToLogin();
      }
    
      logout() {
        this.authService.logout().subscribe();
      }
    }
    
    • Replace the generated current-user.component.html with the following:
    <ng-container *ngIf="currentUser$ | async as user">
      <ng-template #loginBtn>
        <a role="button" class="btn" (click)="navigateToLogin()">
          <i class="fas fa-sign-in-alt mr-1"></i>
          {{ 'AbpAccount::Login' | abpLocalization }}</a
        >
      </ng-template>
      <div *ngIf="user.isAuthenticated; else loginBtn" class="dropdown btn-group" ngbDropdown>
        <a ngbDropdownToggle class="btn pointer d-flex">
          <abp-current-user-image
            *abpReplaceableTemplate="{
              componentKey: currentUserImageComponentKey,
              inputs: { currentUser: { value: user }, classes: { value: 'user-avatar' } }
            }"
            classes="user-avatar"
          ></abp-current-user-image>
          <span class="ml-1">
            <small *ngIf="(selectedTenant$ | async)?.name as tenantName"
              ><i>{{ tenantName }}</i
              >\</small
            >
            <span>{{ user.userName }}</span>
          </span>
        </a>
        <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
          <div class="p-2 row">
            <div class="pr-0 col col-auto">
              <abp-current-user-image
                *abpReplaceableTemplate="{
                  componentKey: currentUserImageComponentKey,
                  inputs: { currentUser: { value: user }, classes: { value: 'user-avatar-big' } }
                }"
                classes="user-avatar-big"
              ></abp-current-user-image>
            </div>
            <div class="pl-2 col">
              <span>{{ 'AbpAccount::Welcome' | abpLocalization }}</span
              ><br />
              <small *ngIf="(selectedTenant$ | async)?.name as tenantName"
                ><i>{{ tenantName }}</i
                >\</small
              >
              <strong>{{
                ((user.name || '') + ' ' + (user.surName || '')).trim() || user.userName
              }}</strong>
            </div>
          </div>
          <div class="dropdown-divider"></div>
          <a
            *ngIf="openMyLinkUsersModal"
            class="dropdown-item pointer"
            (click)="openMyLinkUsersModal()"
            >{{ 'AbpAccount::LinkedAccounts' | abpLocalization }}</a
          >
          <a class="dropdown-item pointer" (click)="navigateToManageProfile()">{{
            'AbpAccount::MyAccount' | abpLocalization
          }}</a>
          <a class="dropdown-item pointer" (click)="navigateToMySecurityLogs()">{{
            'AbpAccount::MySecurityLogs' | abpLocalization
          }}</a>   
          <a class="dropdown-item pointer" id="logout" (click)="logout()">{{
            'AbpUi::Logout' | abpLocalization
          }}</a>
        </div>
      </div>
    </ng-container>
    
    • Replace the current user component like this:
    import { NavItemsService } from '@abp/ng.theme.shared';
    import { Component } from '@angular/core';
    import { eThemeLeptonComponents } from '@volo/abp.ng.theme.lepton';
    import { CurrentUserComponent } from './current-user/current-user.component';
    
    @Component({
      selector: 'app-root',
      template: `
        &lt;abp-loader-bar&gt;&lt;/abp-loader-bar&gt;
        &lt;abp-dynamic-layout&gt;&lt;/abp-dynamic-layout&gt;
      `,
    })
    export class AppComponent {
      constructor(private navItems: NavItemsService) {
        this.navItems.patchItem(eThemeLeptonComponents.CurrentUser, {
          component: CurrentUserComponent,
        });
      }
    }
    

    After the replacement, you can modify the current user component as you wish. Sorry for the late response. Regards.

  • User Avatar
    0
    kaustubh.kale@ness.com created

    Thanks Mehmat . Given Solution is worked for me.

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