As previously mentioned, Fuse comes with variety of different layouts. These layouts are on the theme level, meaning that when changed, they can completely alter the look of your app.

By default, layouts are applied automatically via the LayoutComponent. The default layout is set by the app.config.ts file from app/core/config/ directory. This configuration file is supplied as the default configuration to the FuseConfigService which is a custom made configuration service to store, write and read application wide configurations.

More detailed information about FuseConfigService can be found in the Core features > Services > Config section of this documentation.

After the default layout is read and set from the configuration service, LayoutComponent will also read the current route tree, walk through it starting from the root all the way to the current route and look for the layout key-value from the data object. If found, LayoutComponent will switch to that layout. This is particularly useful if you want to have different layouts for different portions of your app.

Here's an example from app.routing.ts file that loads the EmptyLayout for authentication pages:

// Auth routes (guest) { path: '', canActivate: [NoAuthGuard], canActivateChild: [NoAuthGuard], component: LayoutComponent, data: { layout: 'empty' }, children: [ { path: 'sign-in' ... }, ] }

And here's another example that loads the classic layout:

{ path : 'some-path', component : SomeComponent, data: { layout: 'classic' // Load the classic layout for this route } }

LayoutComponent

The LayoutComponent plays an important part for managing important things such as the current layout and the color theme. Because of it, removing the LayoutComponent and using the individual layouts by themselves is not possible.