Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


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
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(