Documentation
Fuse Components
Services

## Config

FuseConfigService is a singleton service to store and access an application wide configuration object. It can be used to store any kind of data and can be accessed from anywhere within your application.

## Module

import { FuseConfigModule } from '@fuse/services/config';

## Default configuration

By default, the application wide configuration is stored in `src/app/core/config/app.config.ts` file and it includes the layout style as well as the color theme configurations:

import { Layout } from 'app/layout/layout.types'; // Types export type Scheme = 'auto' | 'dark' | 'light'; export type Screens = { [key: string]: string }; export type Theme = 'theme-default' | string; export type Themes = { id: string; name: string }[]; /** * AppConfig interface. Update this interface to strictly type your config * object. */ export interface AppConfig { layout: Layout; scheme: Scheme; screens: Screens; theme: Theme; themes: Themes; } /** * Default configuration for the entire application. This object is used by * FuseConfigService to set the default configuration. * * If you need to store global configuration for your app, you can use this * object to set the defaults. To access, update and reset the config, use * FuseConfigService and its methods. * * "Screens" are carried over to the BreakpointObserver for accessing them within * components, and they are required. * * "Themes" are required for Tailwind to generate themes. */ export const appConfig: AppConfig = { layout : 'classy', scheme : 'light', screens: { sm: '600px', md: '960px', lg: '1280px', xl: '1440px' }, theme : 'theme-default', themes : [ { id : 'theme-default', name: 'Default' }, { id : 'theme-brand', name: 'Brand' }, { id : 'theme-teal', name: 'Teal' }, { id : 'theme-rose', name: 'Rose' }, { id : 'theme-purple', name: 'Purple' }, { id : 'theme-amber', name: 'Amber' } ] };

The default configuration is supplied to the FuseConfigService using the `FuseConfigModule.forRoot()` in AppModule:

import { appConfig } from 'app/core/config/app.config'; ... imports: [ FuseConfigModule.forRoot(appConfig) ...

## Methods

To set a configuration use `config` setter on FuseConfigService. The setter will intelligently merge the configuration by replacing only the given options if they exist while preserving others. If the supplied option does not exist on the configuration, it will be added:

import { FuseConfigService } from '@fuse/services/config'; /** * Constructor */ constructor(private _fuseConfigService: FuseConfigService) { this._fuseConfigService.config = {layout: 'classy'}; }

To get the configuration use `config$` getter on FuseConfigService which returns an `Observable` of the configuration object:

import { FuseConfigService } from '@fuse/services/config'; import { AppConfig } from 'app/core/config/app.config'; config: AppConfig; /** * Constructor */ constructor(private _fuseConfigService: FuseConfigService) { this._fuseConfigService.config$ .pipe(takeUntil(this._unsubscribeAll)) .subscribe((config: AppConfig) => { this.config = config; } });