1. Home
  2. Forum
  3. Angular
  4. How to hide the ribbon tab or ribbon group in the ejs-ribbon control?

How to hide the ribbon tab or ribbon group in the ejs-ribbon control?

Hi Team!
I have created a ribbon use the ejs-ribbon control as below image
Image_2755_1738895742254
I make a button in the my application, when I click this button, I want to hide a tab or group in the Ribbon control
Image_7350_1738895968262
Do you have any property for the Ribbon to hide this one?
Please let me know your solution or suggestion to resolve this one
Thanks!


10 Replies
VG Vigneshwaran Govindharajan Syncfusion Team February 10, 2025 01:03 PM UTC

Hi Pham,


Greetings from Syncfusion support,


You can use the built-in methods showTab, hideTab, showGroup & hideGroup to dynamically show or hide tabs and groups in the Ribbon control based on your requirements. Please check the below shared code block and sample for reference.


  • showTab / hideTab – Method to show or hide a specific tab dynamically by passing the tab ID as a parameter.
  • showGroup / hideGroup - Method to show or hide a specific group within a tab by passing the group ID as a parameter.


Sample - link


App.component.html

<div id="default-ribbonContainer">

    <label for="checked" style="padding: 10px">Show / hide "Insert" tab: </label>

    <ejs-switch onLabel="ON" offLabel="OFF" (change)='onTabSwitch($event)'></ejs-switch>

    <label for="checked" style="padding: 10px">Show / hide "Illustrations" group of "Insert" tab: </label>

    <ejs-switch onLabel="ON" offLabel="OFF" (change)='onGroupSwitch($event)'></ejs-switch>

    <ejs-ribbon #defaultRibbon id="default-ribbon" [fileMenu]='fileSettings' [enablePersistence]="true" (launcherIconClick)='launchClick($event)'>

      <e-ribbon-tabs>

        <e-ribbon-tab header="Home">

          <e-ribbon-groups>

            ....

            <e-ribbon-group header="Illustrations" overflowHeader="Illustrations" id="defaultRibbon-insert-illustration" [showLauncherIcon]=true orientation="Row" groupIconCss="e-icons e-image" [enableGroupOverflow]=true>

              <e-ribbon-collections>

            .....

          </e-ribbon-groups>

        </e-ribbon-tab>

      </e-ribbon-tabs>

    </ejs-ribbon>

</div>


App.component.ts

  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];

  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };

  ....

  public onTabSwitch(args) {

    if (args.checked)

      this.ribbonObj.hideTab('defaultRibbon-insert');

    else

      this.ribbonObj.showTab('defaultRibbon-insert');

  }

 

  public onGroupSwitch(args) {

    if (args.checked)

      this.ribbonObj.hideGroup('defaultRibbon-insert-illustration');

    else

      this.ribbonObj.showGroup('defaultRibbon-insert-illustration');

  }


Please get back to us if you need any further assistance.


Regards,

Vigneshwaran


PV Pham Van Sy replied to Vigneshwaran Govindharajan February 13, 2025 02:39 AM UTC

Thanks  Vigneshwaran
I have tried it and it's working fine
Thank You!


IS Indrajith Srinivasan Syncfusion Team February 13, 2025 04:58 AM UTC

Pham,


Welcome, please get back to us if you need any further assistance.


Regards,

Indrajith


PV Pham Van Sy replied to Indrajith Srinivasan March 31, 2025 10:30 AM UTC

Hi  Indrajith Srinivasan
I have tried your solution in the sample code
I can hide the Tab of the Ribbon Component but I cannot hide the Group
this is my code, as you can see, I want to hidden the Clipboard group, I used the hideGroup method but it's not working
Image_6106_1743416872330

Image_9522_1743416897418

Please let me know your suggestion in this case?
Thank You!
SY


IS Indrajith Srinivasan Syncfusion Team April 1, 2025 08:18 AM UTC

Hi Pham,


Good day to you,


We have checked your shared code blocks and tried to replicate the reported issue with the ribbon component, but the methods showGroup & hideGroup works fine. Check the below shared sample for your reference.


Sample - Link



public onGroupSwitch(args) {

    if (args.checked){

        this.ribbonObj.hideTab('defaultRibbon-equation');

        this.ribbonObj.hideGroup('defaultRibbon-home-clipboard');

    }

    else {

      this.ribbonObj.showTab('defaultRibbon-equation');

      this.ribbonObj.showGroup('defaultRibbon-home-clipboard');

    }

  }

 


Can you please share with us the following details?


  • Can you share the ribbon style and source package version you are using?
  • Do the above shared sample code blocks meet your issue replication scenario?


The above details will be helpful for us to further validate the reported issue and assist you better.


Regards,

Indrajith


PV Pham Van Sy replied to Indrajith Srinivasan April 1, 2025 09:04 AM UTC

Thank for your reply

:host ::ng-deep #defaultRibbon {
  --header-height: 150px;
  height: var(--header-height);
  @keyframes FadeOut {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  #defaultRibbon_filemenu {
    background-color: var(--green-600);
    color: var(--white);

    &:hover {
      color: var(--white);
    }
  }

  .e-content {
    height: calc(var(--header-height) - 45px) !important;

    .e-item.e-active {
      animation: FadeOut 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 1000s 1 normal none running !important;
    }

    .e-item {
      background: #fafafa;
      height: 100% !important;

      .e-ribbon-tab-item {
        height: 100% !important;

        .e-ribbon-group,
        .e-ribbon-group-container {
          height: 100% !important;

          .e-ribbon-group-content {
            height: 70% !important;

            .e-ribbon-item {
              .icon {
                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
                width: 40px;
                height: 40px;
              }

              .icon-small {
                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
                width: 14px;
                height: 14px;
              }

              .icon-smaller {
                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
                width: 20px;
                height: 20px;
              }

              .icon-large {
                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
                width: 120px;
                height: 120px;
              }

              .icon-medium {
                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
                width: 70px;
                height: 70px;
              }

              .icon-copy {
                background-image: url("~src/assets/images/clipboardcopy.png");
              }

              .icon-paste {
                background-image: url("~src/assets/images/icon-paste1.png");
              }

              .icon-cut {
                background-image: url("~src/assets/images/ClipboardCut.png");
              }

              .icon-delete {
                background-image: url("~src/assets/images/clipboardelete.png");
              }

              .icon-clipBoard {
                background-image: url("~src/assets/icons/copy-to-clipboard.svg");
              }
            }

            .e-input-group {
              border-width: 1px;
              border-color: var(--gray-300);
            }
          }
        }
      }
    }
  }
}

.footer-template {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 10px;

  button {
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    font-size: 12px;
    width: 80px;
    height: 30px;

    &::after {
      background: white;
    }

    &:hover {
      background: rgb(101, 126, 163);
    }

  }
}

.header_ribbon_style .e-ribbon-group-header,
.font-group .e-ribbon-group-header {
  font-size: 14px;
}

.min-w-40 {
  min-width: 40px !important;
}

.min-w-70 {
  min-width: 70px !important;
}

.min-w-90 {
  min-width: 90px !important;
}

.min-w-100 {
  min-width: 100px !important;
}

.min-w-120 {
  min-width: 120px !important;
}

.min-w-200 {
  min-width: 200px !important;
}

.justify-left {
  justify-content: left;
}

.border-1 {
  border: 1px solid black;
}

.flex-row-center {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
}

.flex-row-end
{
  display: flex !important;
  justify-content: end !important;
  flex-direction: row !important;
  vertical-align: text-top;
}

.length-setting {
  padding: 7px !important;
}

::ng-deep {
  ejs-listview {
    .e-list-parent {
      display: flex;
      align-items: center;

      .e-list-item {
        height: 100% !important;
      }
    }
  }
}

// Dropdown CSS

#function-dropdown,
#word-dropdown,
#application-dropdown,
#relationship-dropdown,
#boxes-dropdown,
#greek-capital-dropdown,
#greek-small-dropdown,
#script-dropdown,
#matrix-dropdown,
#bar-dropdown,
#frac-dropdown,
#arrow-dropdown,
#decorator-dropdown,
#sum-dropdown,
#bracket-dropdown,
#integral-dropdown,
#accent-dropdown,
#arrow-code-dropdown,
#operator-dropdown,
#container-dropdown,
#theory1-dropdown,
#theory2-dropdown,
#fundamental1-dropdown,
#fundamental2-dropdown,
#function2-dropdown,
#time-dropdown,
#derivative-dropdown,
#instrusment-dropdown,
#stability-dropdown,
#theorem-dropdown {
  padding: 10px;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  max-height: 700px;
  overflow-y: auto;

  .function-dropdown-item {
    padding: 18px;

    &:hover {
      cursor: pointer;
      background: var(--blue-400);
    }
  }

  .container-dropdown-item {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;

    &:hover {
      background: var(--blue-400);
      cursor: pointer;
    }
  }
}

#list-dropdown .list-wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-300);

  .group {
    display: flex;
    flex-direction: column;

    &-title {
      background: var(--blue-100);
      padding: 8px;
      margin: 12px 0;
    }

    &-content {
      display: flex;
      align-items: center;
      padding: 12px;

      &-item {
        &:hover {
          background: var(--blue-400);
          cursor: pointer;
        }

        padding: 18px;
        display: flex;
        align-items: center;
        gap: 12px;
      }
    }
  }
}

::ng-deep.e-ribbon-item > button:hover {
  background-color: #f0f0f0 !important;
}

::ng-deep.e-split-btn-wrapper > button:hover {
  background-color: #f0f0f0 !important;
}

.editing-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  .editing-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    gap: 10px;
    border: none;
    background-color: #F0F0F0;

    img {
      width: 80px;
      height: 80px;
      object-fit: contain;
    }

    &:hover {
      cursor: pointer;
      background-color: #86cbea;
    }
  }
}

.stop-button-class {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    background-color: #F0F0F0;
    padding: 10px;
 
    img {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }
 
    &:hover {
      cursor: pointer;
      background-color: #86cbea;
    }
}

Here is my source code for ribbon style, please help me to find any anomalies in the above code
Thank You!

SY


IS Indrajith Srinivasan Syncfusion Team April 2, 2025 01:25 PM UTC

Pham,


Thank you for sharing your ribbon style code. We have tried to replicate the reported issue with the already shared sample, but still the functionality of methods works fine. Shared the ensured sample for your reference.


Sample - Link


In addition, we have reviewed the provided styles, and Deep Styling (::ng-deep) is a suspect that could impact the syncfusion styles:


  • The ::ng-deep selector is used extensively, which may override default Syncfusion styles unpredictably. Consider testing by temporarily removing or reducing ::ng-deep usage to check if it affects the issue.


If you still encounter similar issues, to proceed further can you please share with us the following details


  • Can you share the ribbon style and source package version you are using?
  • If possible, can you share minimal issue reproducing ribbon code blocks or a sample?


Looking forward to your response.


Regards,

Indrajith


PV Pham Van Sy replied to Indrajith Srinivasan April 9, 2025 10:32 AM UTC

Thank  Indrajith Srinivasan,

As describe in the video below, I want to hide the Speak Logic Group and the Equations Tab by select an option to hide
In the first time, the group and tab was hidden but when I changed the domain, the Speak Logic still appear on the ribbon
Here is video and my source code, please review it and let me know how to hide this group
Video
Code

Thank You!


IS Indrajith Srinivasan Syncfusion Team April 11, 2025 10:36 AM UTC

Pham,


Sorry for the delay in getting back to you.


On further validation with the reported issue using the shared samples, we have identified that the Speak Logic group reappears due to the component re-rendering triggered when interacting with items in the Domain tab. During this re-render, the Syncfusion Ribbon component resets to its initial state, and previously hidden groups (like Speak Logic) become visible again.


To resolve this, we introduced a Boolean flag isGroupHide to manage the visibility state of the Speak Logic group. We used a slight delay inside ngOnInit to apply the hideGroup or showGroup method calls after Angular completes its re-render cycle. Please check the below shared code block for reference.


sync-ribbon.component.ts

private isGroupHide: boolean = false;

 

ngOnInit()

{

    this.coreService.getDomain().pipe(takeUntil(this._destroyed)).subscribe((domain) =>

    {

      …

      setTimeout(() => {

        if (this.isGroupHide) {

          this.ribbonObj.hideGroup('defaultRibbon-insert-speaklogic');

        } else {

          this.ribbonObj.showGroup('defaultRibbon-insert-speaklogic');

        }

      }, 50);     

    });

  ……

}

 

private handleShowOrHideEquationTab(applicationSetting: ApplicationSettingOptions)

  {

    …..

    if (applicationSetting === ApplicationSettingOptions.NonMath)

    {

      this.isGroupHide = true;

      …..

    }

    else

    {

      this.isGroupHide = false;

      …..

    }

  }


Please let us know if you need any further assistance on this.


Regards,

Indrajith


PV Pham Van Sy replied to Indrajith Srinivasan April 16, 2025 10:26 AM UTC

Thank  Indrajith Srinivasan,

I have tried and it's working fine
Thank You!

SY


Loader.
Up arrow icon