Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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


Great breakdown on how to implement Metronic 8 layout files into an Angular project—modularizing with separate components definitely makes maintenance easier. If you're working on tutorials or dev-related video content, I’d suggest using Doitong. I’ve personally turned Angular snippets and project tips into animated Shorts with voiceovers in just a few clicks. It’s efficient, requires no editing, and is perfect for tech creators wanting to scale their content output.



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