Another key building block of Angular services. Following Angular's architecture, services are supposed to encapsulate business logic and application-wide states. Additionally, services are useful to bridge between different components that aren't necessarily a direct parent and child.

As this is your first services-related task, extract the categories data to an Angular service.

First, generate the CategoriesService service, as part of the CoreModule, by executing the following command:

ng generate service modules/core/services/categories

Afterward, the service is created in a file named categories.service.ts, containing the following content:

import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class CategoriesService {
  constructor() { }
}

As you can see, services in Angular are simply classes decorated with an @Injectable decorator.

Angular provides a dependency injection solution, which eases the use of services in your app. Dependency injection enables you to plug services into the Angular injector and then resolve it where needed by specifying it as part of the constructor arguments.

Next, complete CategoriesService and use it to load and display the categories:

1. Implement CategoriesService as follows:
   1. Change the providedIn value so that the service is provided as part of CoreModule
   2. Implement a function to retrieve the categories, as follows:

import { Injectable } from '@angular/core';
import { CoreModule } from '../core.module';
import { Category } from '../../../model';
 
@Injectable({
  providedIn: CoreModule
})
export class CategoriesService {
  loadCategories(): Category[] {
    return [
      {name: 'Books'},
      {name: 'Appliances'},
      {name: 'Food'},
    ];
  }
}

2. Import CoreModule as part of the root application module in app.module.ts:

...
import { CoreModule } from './modules/core/core.module';
 
@NgModule({
  ...
  imports: [
    BrowserModule,
    CoreModule,
    SharedModule,
    MarketModule,
  ],
  ...
})
export class AppModule { }

3. Use the new service in ProductsPageComponent by requiring it as a dependency as part of its constructor arguments:

import { Component, OnInit } from '@angular/core';
import { Category } from '../../../model';
import { CategoriesService } from '../../core/services/categories.service';
 
@Component({
  selector: 'app-products-page',
  templateUrl: './products-page.component.html',
  styleUrls: ['./products-page.component.css']
})
export class ProductsPageComponent implements OnInit {
  categories: Category[];
  selectedCategory: Category;
 
  constructor(private readonly categoriesService: CategoriesService) { }
 
  ngOnInit() {
    this.categories = this.categoriesService.loadCategories();
  }
 
  onCategoryChanged(category: Category) {
    this.selectedCategory = category;
    alert(category.name);
  }
}

Congratulations! You just implemented and consumed your first service in Angular. You can now run the app and confirm that everything works—the categories should now be loaded as part of the service.