Digging into the Example

For this example, you can use the code from chapter6/template-driven/control-validity as the base to code from. We will modify the example to achieve what we have just outlined.

First, let’s tackle the easy stuff. The StockItemComponent class does not need any change, but we will change the template for it slightly so that it displays both an Add to Favorite and a Remove from Favorite button depending on the state of the stock. We can modify src/app/stock/stock-item/stock-item.component.html as follows:

<div class="stock-container">
  <div class="name">{{stock.name + ' (' + stock.code + ')'}}</div>
  <div class="exchange">{{stock.exchange}}</div>
  <div class="price"
      [class.positive]="stock.isPositiveChange()"
      [class.negative]="!stock.isPositiveChange()">$ {{stock.price}}</div>
  <button (click)="onToggleFavorite($event)"
          *ngIf="!stock.favorite">Add to Favorite</button>
  <button (click)="onToggleFavorite($event)"
          *ngIf="stock.favorite">Remove from Favorite</button>
</div>

We have just added a div to show the exchange of the stock, and a button to show Remove from Favorite if the stock is already favorited.

Next, let’s create the skeleton for the StockListComponent before we try creating and integrating our StockService. We can generate the skeleton by executing:

ng g component stock/stock-list

which we can then modify to our purpose. We will modify the src/app/stock/stock-list/stock-list.component.ts file as follows:

import { Component, OnInit } from '@angular/core';
import { Stock } from 'app/model/stock';

@Component({
  selector: 'app-stock-list',
  templateUrl: './stock-list.component.html',
  styleUrls: ['./stock-list.component.css']
})
export class StockListComponent implements OnInit {

  public stocks: Stock[];
  constructor() { }

  ngOnInit() {
    this.stocks = [
      new Stock('Test Stock Company', 'TSC', 85, 80, 'NASDAQ'),
      new Stock('Second Stock Company', 'SSC', 10, 20, 'NSE'),
      new Stock('Last Stock Company', 'LSC', 876, 765, 'NYSE')
    ];
  }

  onToggleFavorite(stock: Stock) {
    console.log('Favorite for stock ', stock, ' was triggered');
    stock.favorite = !stock.favorite;
  }
}

There are a few things of note here, but nothing fundamentally new or path-breaking so far:

• We have declared an array of stocks at the class level, and initialized it with some default values in the ngOnInit block.

• We have a function onToggleFavorite that logs the stock and toggles its favorite state.

Let’s now look at its corresponding template, in src/app/stock/stock-list/stock-list.component.html:

<app-stock-item *ngFor="let stock of stocks" [stock]="stock"
                (toggleFavorite)="onToggleFavorite($event)">
</app-stock-item>

In the template, we simply loop over all the stocks and display an instance of the StockItemComponent for each one. We ask the StockItemComponent to trigger the onToggleFavorite whenever someone clicks the Add to Favorite or Remove from Favorite button within the stock item.

The AppComponent can now be simplified further. The component class in src/app/app.component.ts can be modified to:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Stock Market App';

  ngOnInit(): void {
  }
}

The corresponding template in src/app/app.component.html can be modified to:

<h1>
  {{title}}
</h1>
<app-stock-list></app-stock-list>
<app-create-stock></app-create-stock>

Now finally, let’s look at what it takes to build a very simple and trivial StockService. We can again generate the base skeleton for the service using the Angular CLI as follows:

ng g service services/stock

This will generate two files, a skeleton stock-service.ts and a dummy test for it in stock-service.spec.ts. We will ignore the latter for now but will return to it in Chapter 10, as part of our discussion of unit testing of services. The generated skeleton in src/app/service/stock.service.ts should look something like this:

import { Injectable } from '@angular/core';

@Injectable()
export class StockService {

  constructor() { }

}

The skeleton is literally just an empty shell class, with one decorator of note, which is Injectable. The Injectable decorator has no current value for us, but is a recommended decorator whenever you are working with services, as it is a hint to the Angular dependency injection system that the service you are working on might have other dependencies. With the Injectable decorator, Angular will take care of injecting them into our service.

We will leave the decorator untouched, keeping with the best practices. And pretty soon, as early as the next chapter, we will need it anyway.

Now, let’s get to the crux of the work, which is the data that the StockService is to provide. This is where services really shine. Components generally will defer and ask a service for data (or a section of the data). It is up to the service to decide how and where to fetch the data from, whether it is from a web service via HTTP calls, a local storage or cache, or even return mock data, as we will in just a bit. Later, if we want to change the source, we can do it in one place without touching any of the components, as long as our API signature remains the same.

Let’s define our StockService to continue returning mock data. We will edit the src/app/services/stock.service.ts file as follows:

import { Injectable } from '@angular/core';
import { Stock } from 'app/model/stock';

@Injectable()
export class StockService {

  private stocks: Stock[];
  constructor() {
    this.stocks = [
      new Stock('Test Stock Company', 'TSC', 85, 80, 'NASDAQ'),
      new Stock('Second Stock Company', 'SSC', 10, 20, 'NSE'),
      new Stock('Last Stock Company', 'LSC', 876, 765, 'NYSE')
    ];
   }

  getStocks() : Stock[] {
    return this.stocks;
  }

  createStock(stock: Stock) {
    let foundStock = this.stocks.find(each => each.code === stock.code);
    if (foundStock) {
      return false;
    }
    this.stocks.push(stock);
    return true;
  }

  toggleFavorite(stock: Stock) {
    let foundStock = this.stocks.find(each => each.code === stock.code);
    foundStock.favorite = !foundStock.favorite;
  }
}

While it seems like we have added a lot of code, if we dig into it, there is nothing that is Angular specific in the code we added. Most of the added code is business functionality that we have defined and enforced via the StockService. Let’s quickly walk through the major functionality we have introduced in the service:

• We have moved our initialization of the mock list of stocks to the constructor of the StockService, initializing it with some dummy values to provide an initial state for our UI when it is rendered.

• We have defined a very simple getStocks() method that simply returns the current list of stocks.

• The createStock method does little more than simply adding the stock to our list of stocks. It first checks if the stock already exists (using the code on the stock to check for uniqueness), exiting early if it does. If not found, it adds the passed-in stock to our list of stocks.

• Finally, we have a toggleFavorite, which simply finds the passed-in stock in our array and then toggles the state of the favorite key on it.

Now that we have defined our service, let’s see what it takes to be able to use it in our components. Before we can start injecting it into our components, we need to define how this service will be provided and at what level. We can define this at the StockListComponent level, the AppComponent level, or the AppModule level. We will see what the difference is in a bit, but in the meantime, let’s define it at the module level.

Let’s edit the src/app/app.module.ts file to define the provider as follows:

/** Imports same as before, skipped for brevity **/
import { StockService } from 'app/services/stock.service';

@NgModule({
  declarations: [
    AppComponent,
    StockItemComponent,
    CreateStockComponent,
    StockListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
    StockService                    
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Registering the provider for StockService

We have just made a small addition to the NgModule decorator on the AppModule. We have registered an array of providers, in which the StockService is the one and only service right now. The providers array in the Angular module tells Angular to create a singleton instance of the service, and make it available for any class or component that asks for it. When we register it at the module level, it means that any component within the module that asks for the service will get the exact same instance injected into it.

ng g service services/stock --module=app

At this point, we are ready to start using the service, so first we will use it in the newly created StockListComponent. Let’s change the src/app/stock/stock-list/stock-list.component.ts file as follows:

import { Component, OnInit } from '@angular/core';
import { StockService } from 'app/services/stock.service';
import { Stock } from 'app/model/stock';

@Component({
  selector: 'app-stock-list',
  templateUrl: './stock-list.component.html',
  styleUrls: ['./stock-list.component.css']
})
export class StockListComponent implements OnInit {

  public stocks: Stock[];
  constructor(private stockService: StockService) { }   

  ngOnInit() {
    this.stocks = this.stockService.getStocks();        
  }

  onToggleFavorite(stock: Stock) {
    console.log('Favorite for stock ', stock, ' was triggered');
    this.stockService.toggleFavorite(stock);            
  }
}

Inject the StockService into the component

Use the StockService to get the list of stocks

Use the StockService to toggle the favorite status on a stock

This is our first instance of injecting and using a service, so let’s walk through it step by step:

1. We can inject any service we want into our component simply by listing it in our constructor. In this case, we have declared a private instance of StockService with the name stockService. The name itself doesn’t matter; Angular uses the type definition to figure out what service to inject. For all we care, we could even call the instance of the service xyz (not that you should!), and it would still get injected correctly.

2. We simply call the methods we want on our service through our instance (like stockService.getStocks() or stockService.toggleFavorite()) at the correct time. We initialize our list of stocks, and pass through the toggle call to the service. Note that we need to access the service through an instance variable and cannot access it directly (that is, we need to call this.stockService, and cannot directly use stockService).

While we don’t need to make any changes to the corresponding template, here is what the template for the StockListComponent looks like in case you don’t remember:

<app-stock-item *ngFor="let stock of stocks" [stock]="stock"
                (toggleFavorite)="onToggleFavorite($event)">
</app-stock-item>

With this, we need to make no more changes in our template. If we run the application at this point, we should see it running with a list of three stocks displayed at the top.

Let’s continue with the minor changes to the CreateStockComponent to finish the service integration. First, we’ll add a simple message to the top of the CreateStockComponent template, to show a message to the user if the stock was created successfully or if there was any error in creation. We will edit src/app/stock/create-stock/create-stock.component.html as follows:

<h2>Create Stock Form</h2>

<div *ngIf="message">{{message}}</div>        
<div class="form-group">
  <!-- Rest of the form omitted for brevity -->
  <!-- No change from the base code -->
</div>

<h4>Stock Name is {{stock | json}}</h4>

Display a message if it exists

The highlighted line is the only change in this file, which is simply adding a div that shows the message class variable if it has a value.

Now, we can change the component in src/app/stock/create-stock/create-stock.component.ts to integrate with the StockService:

import { Component, OnInit } from '@angular/core';
import { Stock } from 'app/model/stock';
import { StockService } from 'app/services/stock.service';

@Component({
  selector: 'app-create-stock',
  templateUrl: './create-stock.component.html',
  styleUrls: ['./create-stock.component.css']
})
export class CreateStockComponent {

  public stock: Stock;
  public confirmed = false;
  public message = null;                               
  public exchanges = ['NYSE', 'NASDAQ', 'OTHER'];
  constructor(private stockService: StockService) {    
    this.stock =  new Stock('', '', 0, 0, 'NASDAQ');
  }

  setStockPrice(price) {
    this.stock.price = price;
    this.stock.previousPrice = price;
  }

  createStock(stockForm) {
    if (stockForm.valid) {
      let created = this.stockService.createStock(this.stock);   
      if (created) {           
        this.message = 'Successfully created stock with stock code: '
            + this.stock.code;
        this.stock =  new Stock('', '', 0, 0, 'NASDAQ');
      } else {
        this.message = 'Stock with stock code: ' + this.stock.code
            + ' already exists';
      }
    } else {
      console.error('Stock form is in an invalid state');
    }
  }
}

Add a message field to display success and error messages

Inject StockService into the component

Call stockService.createStock when the form is submitted

Deal with success and error scenarios while creating the stock

The CreateStockComponent has been changed slightly to integrate with the Stock​Service as follows:

• We created a message field to show useful messages to the user on successful creation of stock as well as errors while creating it.

• We injected the StockService and then called it when the form is submitted by the user.

• We used the return value of the StockService.createStock() call to decide what message to show to the user in the UI.

While we are at it, we can remove some of the CSS that makes the form hard to read from src/app/stock/create-stock/create-stock.component.css, and just empty the file.

Now when we run this application, it should still look the same as before. The difference is that when you fill the create stock form and click Create, it should clear the form, and you should see the stock you just entered like in Figure 8-1.

Now of course, one of the first things you might ask is “How did adding the stock to the list of stocks in the service make it appear in the StockListComponent magically?” It is a very valid question, and the answer to that is JavaScript! We return the reference to the stock array in the getStocks() method, which is what the StockListComponent assigns to its member variable. Thus, any addition in the service automatically makes a change in the component that is holding on to the reference of the array.

This is still hacky in some sense, as we wouldn’t want to rely on having the same reference to update the values, but we will fix this shortly. Also, because we are using mock data that is instantiated within the service when it is initialized, you will lose any new stocks you have created when you refresh the page. This is because the service is reloaded and reinitialized when we refresh the page, as we don’t have a persistent store.

So just to recap, this is what we accomplished:

• We created a StockListComponent to display a list of stocks.

• We created a StockService that acts as the layer behind all the components, providing APIs to fetch a list of stocks as well as to create new stocks. Currently, it is working off of mock data.

• We made slight updates to all the components to integrate with this service.

Figure 8-1. Angular service sharing data between components

We have dealt with a very basic and simple Angular service to show what an Angular service is, how it is created, and how it is hooked up and used within the context of an Angular application.

The completed version of this code is available in chapter8/simple-service in the GitHub repository.

An Introduction to Dependency Injection

Before we dive deeper into services and other related topics, let’s take a step back to understand dependency injection, especially in context to Angular.

Dependency injection started in static languages that are more common in server-side programming. In simple terms, dependency injection is the idea that any class or function should ask for its dependencies, rather than instantiating it themselves. Something else (usually called an injector) would be responsible for figuring out what is needed and how to instantiate it.

Dependency injection has huge benefits when we practice it in our applications, as it allows us to create modular, reusable pieces while allowing us to test components and modules easily. Let’s take a simple example to demonstrate how dependency injection can make your code more modular, easier to change, and testable:

class MyDummyService {

    getMyData() {
      let httpService = new HttpService();
      return httpService.get('my/api');
    }
}

class MyDIService {

    constructor(private httpService: HttpService) {}

    getMyData() {
      return this.httpService.get('my/api');
    }
}

In this example, there is actually not much to differentiate between MyDummyService and MyDIService, except for the fact that one instantiates an HttpService before using it, while the other asks for an instance of it in the constructor. But this small change allows for many things, including:

• It makes it more obvious what is necessary for each service to actually execute, rather than finding out at the time of execution.

• In our example, instantiating the HttpService was trivial, but it might not be in certain cases. In such a case, every user of HttpService will need to know exactly how to create it and configure it, before using it.

• In our test, we might not want to make actual HTTP calls. There, we can replace and instantiate MyDIService with a fake HttpService that does not make real calls, while there is nothing we can do for MyDummyService.

There are many more advantages of dependency injection in general, and the official Angular documentation has a great article that covers this in depth if you want to read further on this.

Angular and Dependency Injection

In the previous section, we covered dependency injection in general. In this section, we will dig deeper into how Angular has set up its dependency injection system, and the major things developers should be aware of. We will not go into each and every detail in this section, but cover the general aspects we expect most developers to encounter in their day-to-day work.

We have seen Angular’s dependency injection at work already, with the very first service that we created. For very simple asks, it is enough to think about Angular’s dependency injection service as a very simple key-value store, with the ability of any component or class to ask for a key when they are getting initialized. In reality, it is much more complex than a simple key-value store. We will see how to leverage this dependency injection system in our unit tests in Chapter 10.

Every service that we create needs to be registered as a provider with an injector. Then any other class can ask for the service and the injector will be responsible for providing it. However, as briefly mentioned in the previous section, Angular doesn’t have just one injector—instead, it has a whole hierarchy of injectors.

At its root, at the application level, Angular has the root module and the root injector. When we created our service, and registered it in the providers section of the NgModule, the service was in fact registered with the root injector. This would mean that the service is a singleton for the entire application, and that any class or component in the application can ask for the service and would be handed the very same instance of the service.

Let’s now understand Angular’s hierarchical dependency injection system by taking our example and modifying it to make the dependency injection system apparent. We can use the base code from the previous section in case you are not coding along, which is available in chapter8/simple-service. We will continue from there.

Before we get into the code, let’s cover what exactly will we be trying to accomplish. We will:

• Add a new service called MessageService. This will be used to display messages at various points in the UI, and also as a mechanism to communicate across services.

• Introduce and use the MessageService in both the CreateStockComponent as well as the AppComponent.

First, let’s create the MessageService. This time, we will use the Angular CLI to create it completely for us, including registering it with its provider in the AppModule. Just execute:

ng g service services/message --module=app

This will create a skeleton MessageService in the services folder, and register it with the providers section of the AppModule. Let’s now update the src/app/services/message.service.ts file as follows:

import { Injectable } from '@angular/core';

@Injectable()
export class MessageService {

  public message: string = null;

  constructor() { }
}

MessageService is nothing but a very simple container to hold a message string. It is publicly available, so any class or component can simply reach out and access or change it.

Now, let’s modify the AppComponent to use this service and display the current message in the UI. Modify the src/app/app.component.ts file as follows:

import { Component, OnInit } from '@angular/core';
import { MessageService } from 'app/services/message.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app works!';

  constructor(public messageService: MessageService) {}

  ngOnInit(): void {
    this.messageService.message = 'Hello Message Service!';
  }
}

We simply injected our new MessageService into the AppComponent, and while initializing set it to some default value. Notice that we made the default access for the messageService public, so that we can use it from the template. Let’s now look at the template in src/app/app.component.html:

<h1>
  {{title}}
</h1>
<h3>App level: {{messageService.message}}</h3>
<app-stock-list></app-stock-list>
<app-create-stock></app-create-stock>

We just added one line, which is an h3 element that shows the current value of the message variable in the MessageService that is injected into our AppComponent.

Next, we’ll modify the CreateStockComponent to use the same service. Modify the src/app/stock/create-stock/create-stock.component.ts file as follows:

import { Component, OnInit } from '@angular/core';
import { Stock } from 'app/model/stock';
import { StockService } from 'app/services/stock.service';
import { MessageService } from 'app/services/message.service';

@Component({
  selector: 'app-create-stock',
  templateUrl: './create-stock.component.html',
  styleUrls: ['./create-stock.component.css'],
  providers: [MessageService]
})
export class CreateStockComponent {

  public stock: Stock;
  public confirmed = false;
  public exchanges = ['NYSE', 'NASDAQ', 'OTHER'];
  constructor(private stockService: StockService,
              public messageService: MessageService) {   
    this.stock =  new Stock('', '', 0, 0, 'NASDAQ');
  }

  setStockPrice(price) {
    this.stock.price = price;
    this.stock.previousPrice = price;
  }

  createStock(stockForm) {
    if (stockForm.valid) {
      let created = this.stockService.createStock(this.stock);
      if (created) {                          
        this.messageService.message =
            'Successfully created stock with stock code: ' +
            this.stock.code;
        this.stock =  new Stock('', '', 0, 0, 'NASDAQ');
      } else {
        this.messageService.message = 'Stock with stock code: ' +
            this.stock.code + ' already exists';
      }
    } else {
      console.error('Stock form is in an invalid state');
    }
  }
}

Inject MessageService into the constructor

Use MessageService in both cases of creation

Most of the code remains unchanged from before. We just injected our new service into the class, and then used it instead using console.log. We set the message variable in the MessageService when the stock is created successfully or when there is an error.

Finally, we will use the MessageService in the template of the component here as well to display the same message. Let’s modify src/app/stock/create-stock/create-stock.component.html as follows:

<h2>Create Stock Form</h2>

<div>{{messageService.message}}</div>
<div class="form-group">
  <form (ngSubmit)="createStock(stockForm)" #stockForm="ngForm">
    <div class="stock-name">
      <input type="text"
             placeholder="Stock Name"
             required
             name="stockName"
             #stockName="ngModel"
             [(ngModel)]="stock.name">
    </div>

<!-- Remaining code as before, omitting for brevity -->

We have omitted most of the file, as the only change we did was add line 3, where we displayed the current value of messageService.message in the UI.

Now when we run this, we should see our application, but with two new lines. One is the second line, which is part of our AppComponent, and one within the CreateStockComponent, both of which are displaying the initial value of the message in the UI. If you now fill up the form and create a stock, you will notice that both the messages change simultaneously. Hence, we are assured that there is only one instance of the MessageService, which is being shared across both the components.

Now, let’s modify the CreateStockComponent slightly as follows:

import { Component, OnInit } from '@angular/core';
import { Stock } from 'app/model/stock';
import { StockService } from 'app/services/stock.service';
import { MessageService } from 'app/services/message.service';

@Component({
  selector: 'app-create-stock',
  templateUrl: './create-stock.component.html',
  styleUrls: ['./create-stock.component.css'],
  providers: [MessageService]       
})
export class CreateStockComponent {

  public stock: Stock;
  public confirmed = false;
  public exchanges = ['NYSE', 'NASDAQ', 'OTHER'];
  constructor(private stockService: StockService,
              public messageService: MessageService) {
    this.stock =  new Stock('', '', 0, 0, 'NASDAQ');
    this.messageService.message = 'Component Level: Hello Message Service';    

  }

  setStockPrice(price) {
    this.stock.price = price;
    this.stock.previousPrice = price;
  }

  createStock(stockForm) {
    /* Code as before, no change */
    /* Omitted for brevity */
  }
}

Adding providers declaration for MessageService

Adding an initial value to the MessageService in the component

We’ve made one addition to the @Component decorator for the CreateStockComponent class. We have added a providers declaration, and provided the MessageService at the component level. We also added an initial value to the MessageService in the constructor. We will not make any other changes. We will also leave the MessageService declared in the providers section of the main module.

Before we talk about what happens as a result of this, it is worth executing the application and seeing it yourself. Execute and note the following:

1. See the message in the AppComponent, which is the default we had set.

2. See the message in the CreateStockComponent, which will be the value we set in the component in the constructor "Component Level: Hello Message Service".

3. Now fill up the form and create a stock.

4. Note that the message is updated only in the CreateStockComponent, but the AppComponent message does not change.

When you do all of this, you should see something like Figure 8-2.

Figure 8-2. Angular application with services defined at component level

This is Angular’s hierarchical dependency injection at play. As mentioned before, Angular supports multiple dependency injectors within the same application. There is the root injector at the root AppModule level, which is where most services you create will be registered and made available. This makes the instance available across your entire application, and this was happening initially.

Then, when we made the change to add the providers at the CreateStockComponent level, we brought the injector at the component level into play. Angular will create a chain of injectors all the way down, depending on the need and declarations. And all child components will inherit that injector, which will take precedence over the root injector. When we registered our MessageService provider at the CreateStockComponent level, it created a child injector at that level, with its own instance of the MessageService. What we injected into the CreateStockComponent is in fact this new instance, which has nothing to do with the original root-level MessageService. So we, in fact, have two separate instances of MessageService with nothing in common.

Just like an Angular application is a tree of components, there is a parallel tree of injectors at play. For most components, these injectors might just be a reference or a proxy to the parent injector. But they may not, as we have just seen.

Whenever a component asks for a dependency, Angular will check the closest injector in the tree to see whether it can satisfy it. If it can (like in CreateStockComponent), it will provide it. If not, it will check with the parent injector, all the way to the root injector.

Now when will or can you use this? Usually, it won’t even matter and you will just register all your services at the root level. But there might be cases when you want to use this capability of the Angular injector, such as:

• You want to scope services to only certain components and modules, to ensure that a change in the service doesn’t impact the entire application.

• You might want different instances of a service in different components. This might be common where you might want to override things, or have different services for different instances, and the like.

• You want to override a particular service with a more specific implementation for a section of your application. Maybe you want a cached version of your service for a certain section as opposed to the general pass-through implementation.

There is more detail in how we can instantiate a service and the various ways we can provide them. You can read up on all the details and ways in the official Angular docs.

The completed version of this code is available in chapter8/di-example in the GitHub repository.