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

Install Layout Builders file in the Metronic8 angular project


How to install the newly generated files from Metronic8 layout builder in the angular project. Can you please provide the steps to install and any example would be good ?

Thanks,
Balaji


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)


To install the Layout Builders file in the Metronic 8 Angular project, you need to ensure that you have the correct Metronic package and follow the setup guidelines provided in the documentation. First, extract the Metronic theme and navigate to the angular folder. Then, integrate the Layout Builder by copying the required configuration files into your project structure. Make sure to update your module imports and styles accordingly. If you need additional customization, you can modify the layout settings in layout.config.ts. For those looking for enhanced app experiences, you might also explore Download YouTube Gold APK, which provides advanced YouTube features for a smoother viewing experience.



Hi Balaji

Sorry for the delay. If you're using the exported partial files from the Metronic 8 Layout Builder, you can use them into your new generated Angular project.

Run the following command in your terminal or command prompt:
ng new my-angular-project

create a layout module:
ng g module layout

This will create a layout folder inside src/app/ and a layout.module.ts file.

Run the following commands to generate components:


ng g c layout/header
ng g c layout/sidebar
ng g c layout/footer
ng g c layout/content


Open app.module.ts and register the newly added components:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './layout/partials/header/header.component';
import { SidebarComponent } from './layout/partials/sidebar/sidebar.component';
import { FooterComponent } from './layout/partials/footer/footer.component';

@NgModule({
declarations: [HeaderComponent, SidebarComponent, FooterComponent],
imports: [CommonModule],
exports: [HeaderComponent, SidebarComponent, FooterComponent]
})
export class LayoutModule { }

Modify src/app/app.component.html to include your new layout:

<app-header></app-header>
<app-sidebar></app-sidebar>
<div class="content-wrapper">
<app-content></app-content>
</div>
<app-footer></app-footer>


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