Layouts

Layouts are inside src/app/layouts.

There are two layout components which are loaded in the main router inside app-routing.module.ts file.

You can use other layouts from Ace's HTML version in Angular as well.
You should just re-arrange HTML elements accordingly.

Main Layout

Is used in all pages except for login page. It's located inside layouts/main

Sidebar is a child component of main layout and is inside layouts/main/partials/sidebar folder.
It's just an example and you don't need to use this component.
sidebar.json file is the data for sidebar component, but you can use http services to load remote sidebar data from remote url.

When you open layouts/main/main.component.html, you can see sidebar is as follows:

html
<app-sidebar #sidebar="NgAceSidebar" NgAceSidebar id="sidebar-1" class="sidebar sidebar-fixed expandable sidebar-light">
</app-sidebar>

Please note that app-sidebar element is a component defined and used in demo app and is not a re-usable component. Though you can use it as an example.

[NgAceSidebar] directive is part of the ng-ace-lib and is a re-usable directive that you can apply to your .sidebar element to enable its sidebar functionality such as collapse/expand, etc ...

Submenu component is a child of sidebar component and is in the same folder as sidebar.

Inside layouts/main/partials/sidebar when you open sidebar.component.html or submenu.component.html, you can see submenu is as follows:

html
<app-sidebar-submenu NgAceSubmenu ...>
 ...
</app-sidebar-submenu>   

app-sidebar-submenu element is a component defined and used in demo app and is not a re-usable component. Though you can use it as an example.

[NgAceSubmenu] directive is part of the ng-ace-lib and is a re-usable directive that you can apply to the main .nav or .submenu-inner elements to enable its submenu functionality such as toggling, etc ...

For more information about available methods/events for the above directives, please refer to the relevant sections.

Navbar is a child component for main layout and is inside layouts/main/partials/navbar folder. It's just an example and you don't need to use this component.

It has several child components of its own, such as the navbar-tasks etc

Login Layout

Is only used in login page. It's located inside layouts/login.
It has no child components