Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Angular Template Layout


HI,

I'm developing a web application using the Angular “demo1” template, from Metronic 8.
In this application, I would like to create a specific page with a different layout to the template's default layout. In this case, I'd like to use the layout of the “demo64” HTML template.

Can you help me?


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 (2)


If you're working with the Angular "demo1" template from Metronic 8 and want to implement a different layout like the "demo64" HTML template, you can customize the layout by modifying the routing and structure in your Angular project. You might need to create a new layout component and adjust the module configurations accordingly. Think of it like using Kamaikendra Mod App, where customization gives you a tailored experience beyond the default settings. By carefully structuring your components and styles, you can achieve a seamless integration of multiple layouts within your application.



Hi Thomás Henrique,

We currently do not provide an Angular version for Demo 64. However, you can create a new Angular project and integrate the HTML version manually.

You can extract the necessary assets from the HTML version of Demo 64 and use the Layout Builder to download the layout partials, including the header, footer, sidebar, and content area. These can then be manually integrated into your Angular project.

You can access the Layout Builder here:

http://preview.keenthemes.com/metronic8/demo64/layout-builder.html

Let me know if you need any further guidance!

Best regards.


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  :(