The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro

How to preset and hide toolbar in angular theme?


hello,

in angular version i want to keep the toolbar set to reports by default (right now i go to builder and set it from there each time) and only want to show it in dashboard and selected pages, but its showing in all of my pages.
can you help me here? which service have the settings for toolbar and other similar common components the docs are not clear on this.

thanks


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

Deleted comment
Deleted comment
Deleted comment
Deleted comment
Deleted comment
Deleted comment
Deleted comment
Deleted comment
Deleted comment
Deleted comment

I apologize for the delay in my response. To preset and hide the toolbar in the Angular theme, you can follow these steps:

In your routing file, typically located at /angular/demo1/src/app/pages/routing.ts, you can configure the layout to load for specific pages. For example:

{
path: "dashboard",
loadChildren: () => import("./dashboard/dashboard.module").then(m => m.DashboardModule),
data: { layout: "dark-sidebar" }, // Set the layout for the dashboard page
},

You can set the layout data attribute to 'dark-sidebar' or any other layout you want to use for the page.

Now, you need to locate the layout configuration file that corresponds to the layout you've set. In this case, it's 'dark-sidebar'. The layout configurations can typically be found in a file like /angular/demo1/src/app/_metronic/layout/core/configs/dark-sidebar.config.ts.

In the layout configuration file, you can look for the app.toolbar.display configuration. To hide the toolbar on specific pages, set it to false:

app: {
toolbar: {
display: false, // Set to false to hide the toolbar
},
},

By setting app.toolbar.display to false, you'll hide the toolbar on the pages that use the 'dark-sidebar' layout.

If you have any further questions or need additional assistance, please feel free to ask. Thank you for your patience!


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.