Configuration Settings for Angular Applications

  • export class AppSettings {
    defaultUrl: string = “http://www.fairwaytech.com”
    defaultPrice: number = 1
    }

    To create this class, add a \shared folder under the \src\app folder and add a new Typescript file named AppSettings.ts.

  • import { Injectable } from ‘@angular/core’;
    import { Observable } from ‘rxjs/Observable’;
    import { AppSettings } from class AppSettingsService {
    getSettings(): ObservableAppSettings {
    let settings = new AppSettings();
    return }
    }

    This service class is fairly standard as far as service classes go.

  • Using the AppSettingsService Class

    To retrieve the settings from this service class, import the AppSettings and AppSettingsService classes in your component.

  • subscribe(settings = this.settings = settings,
    () = null,
    () = {
    this.product = new Product();
    this.product.price = this.settings.defaultPrice;
    this.product.url = this.settings.defaultUrl;
    });
    }
    }

    Figure 1: The Price and URL fields are filled in with defaults from the AppSettings class.

  • import { Injectable } from ‘@angular/core’;
    import { Http, Response } from ‘@angular/http’;
    import { Observable } from ‘rxjs/Observable’;
    import { AppSettings } from class AppSettingsService {
    constructor(private http: Http) {
    }
    getSettings(): ObservableAppSettings {
    return .

Just like in .NET applications, you might want to have configuration settings in your Angular applications that you can access from any component or service class. ; Author: Paul D. Sheriff; Updated: 17 Jul 2017; Section: Charts, Graphs and Images; Chapter: Web Development; Updated: 17 Jul 2017

@ProgrammerDudez: Configuration Settings for Angular Applications #AngularJs via @CodeProject #Programming

Just like in .NET applications, you might want to have configuration settings in your Angular applications that you can access from any component or service class. There are many approaches you can take for global settings, however, I am going to use a service that can be injected into any class. I think the flexibility of using a service is an ideal method for providing application-wide settings to any class that needs them. This blog post will describe the process of creating this service.

. These values will be set into a Product object in a product component class a little later.

To create this class, add a \shared folder under the \src\app folder and add a new Typescript file named AppSettings.ts. Enter the code shown in the snippet above.

class. Add a new Typescript file under the \shared folder named AppSettingsService.ts. Add the code shown below.

class and return that object from this service. The main reason I create a service here is to provide the flexibility to change the implementation of how I retrieve the settings later. For example, I might choose to read the settings from a JSON file, or I might even make a Web API call to get the settings. Any method that calls this service will always make the same call regardless of where those settings are stored. The calling methods don’t know if the implementation changes, they still receive the same settings class.

classes in your component.

object is bound to field on my detail page as shown in Figure 1.

Instead of hard-coding the settings values, let’s put those settings into a JSON file. Create a folder called \assets under the \src\app folder. Add a JSON file named appsettings.json. Add the following into this file.

method to handle any exceptions.

decorator function.

In this blog post you learned an approach for handling application-wide settings for Angular applications. A service approach is the most flexible approach to providing settings to any other class in your application. You can choose to store your settings in a class, in an external JSON file, or you can even make a call to a Web API to retrieve the values. The consumers of your service don’t care where they values come from, nor do they have to change the call to the service.

Configuration Settings for Angular Applications

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.