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
src/app/ directory and it's available via
FuseConfigService
.
FuseConfigService
can
be found in the
Fuse Components > 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:
And here's another example that loads the classic layout:
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.