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

4 Answer(s)

• 

  0

  kaustubh.kale@ness.com created 4 years ago

  Hi Team

  Any Update On Above

  Save Cancel
• 

  0

  kaustubh.kale@ness.com created 4 years ago

  Hi Team

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

  Save Cancel
• 

  0

  Mehmet created 4 years ago

  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: `
      <abp-loader-bar></abp-loader-bar>
      <abp-dynamic-layout></abp-dynamic-layout>
    `,
  })
  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.

  Save Cancel
• 

  0

  kaustubh.kale@ness.com created 4 years ago

  Thanks Mehmat . Given Solution is worked for me.

  Save Cancel

  1