Overview + installation

Before starting you need to be authenticated, since the package is hosted within a private npm registry, the authentication steps are described before.

Authentication

The Layout is an Angular utility package designed to simplify building consistent and responsive layouts in modern Angular applications. It provides a modular and flexible Layout Component that integrates seamlessly with Angular’s architecture, including the following core elements:

1. BodyContent: A central content area for your application’s main content, ensuring responsiveness and alignment across different screen sizes.

2. ToolBar: A customizable navigation bar that sits at the top of the layout, designed for branding, navigation links, or user account controls.

3. Sidebar: A collapsible or fixed sidebar for auxiliary navigation, filters, or additional actions, enhancing the user experience for dashboard-style or complex applications.

4. With additional options, if you need to it like logo , language button and mode color app .

Take a brief how will look your application when you start using this package in your app :

The above image is the output for this :

<lib-navbar [navigationItems]="navigationItems">
  <!-- header -->
  <lib-toolbar slot="topContent">
    <div slot="topContentStart">
      <lib-logo />
      
    </div>
    <div slot="topContentCenter"></div>
    <div slot="topContentEnd">
      <lib-cms-theme-switcher />
      <lib-lang-switcher/>
    </div>
  </lib-cms-toolbar>

  <!-- body -->
  <div slot="bodyContent">
    <router-outlet />
  </div>
</lib-cms-nav-container>

Now , let us start to build it together and splice the component !

Install the package in your app :

npm i @tradinos/cms-frontend-layout --force