How can I easily hide the bottom-right menu items in Angular ? #8061

7 Answer(s)

• 

  0

  Anjali_Musmade created 6 months ago

  Support Team Member

  Hello,

  Please follow the below steps
  Step 1- Create custom component 'MySettings'

  ng generate component mySettings
  

  Remove code from my-settings.component.html.

  step 2- Add this new component to app.module and the replaceable settings as the new 'MySettings' .
  

  It will result like -
  

  Thanks

  Save Cancel
• 

  0

  vd created 6 months ago

  Thanks it works but what if for another customer, I want to keep the language selector (and remove the other settings) ?

  Save Cancel
• 

  0

  Anjali_Musmade created 6 months ago

  Support Team Member

  Hello,

  Please try with this code

  export class AppComponent implements OnInit {
  
    constructor(private replaceComponent: ReplaceableComponentsService, private config: ConfigStateService ) {}
  
    ngOnInit(): void {
      const currentUser = this.config.getOne("currentUser");
        if(currentUser.roles.includes('admin'))
          {
            this.replaceComponent.add({
              component: MySettingsComponent,
              key: eThemeLeptonXComponents.Settings,
          });
          }
  
    }
  }
  
  

  It will hide menu for 'admin' role and for other users it will show. You may customize it as per your requirement.

  Thanks,

  Save Cancel
• 

  0

  vd created 6 months ago

  Hello,

  Please try with this code

  export class AppComponent implements OnInit { 
   
    constructor(private replaceComponent: ReplaceableComponentsService, private config: ConfigStateService ) {} 
   
    ngOnInit(): void { 
      const currentUser = this.config.getOne("currentUser"); 
        if(currentUser.roles.includes('admin')) 
          { 
            this.replaceComponent.add({ 
              component: MySettingsComponent, 
              key: eThemeLeptonXComponents.Settings, 
          }); 
          } 
   
    } 
  } 
   
  

  It will hide menu for 'admin' role and for other users it will show. You may customize it as per your requirement.

  Thanks,

  When I say other customer, I meant, another application instance but ok, I get the gist. Thanks.

  However, I just realized that the removed 'settings' menu still appears in mobile :

  

  Shouldn't it be removed as well ?

  Save Cancel
• 

  0

  sumeyye.kurtulus created 6 months ago

  Support Team Angular Expert

  Since then the mobile navigation bar has a separate replacement key, you will need to customize it by using the NavbarMobile key

      this.replaceComponent.add({
        component: MySettingsComponent,
        key: eThemeLeptonXComponents.NavbarMobile,
      });
  

  Save Cancel
• 

  0

  vd created 6 months ago

  My goal is not to rewrite the whole mobile navigation bar, just to remove a menu for both desktop and mobile.

  Others have asked for mobile menu customization recently : https://abp.io/support/questions/7933/Mobile-menu-for-LeptonX-theme-modifications

  Thank you

  Save Cancel

  1
• 

  0

  sumeyye.kurtulus created 6 months ago

  Support Team Angular Expert

  Thank you for your inquiry. We would like to inform you that modifications to this component will be available in the next release. We appreciate your continued cooperation.

  Save Cancel