> For the complete documentation index, see [llms.txt](https://briebug.gitbook.io/angular-fundamentals/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://briebug.gitbook.io/angular-fundamentals/angular-services.md).

# Angular Services

## What is a Service?

* Implemented using simple classes
* Use @Injectable decorator
* Used to
  * load data
  * validation
  * logging

## Creating a Service

{% code title="users.service.ts" %}

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

@Injectable()
export class UserService {
  users = ['Bob', 'Mike', 'Jim'];

  getUsers(): string[] {
    return this.users;
  }
}
```

{% endcode %}

## Dependency Injection

* Common programming technique
* Services are supplied to components using it
* DI allows:
  * Using classes without hard coding constructor calls
  * Loose coupling
  * Substitute mocked services during testing

Bad:

{% code title="users.service.ts" %}

```typescript
import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  userService = new UserService();
}

```

{% endcode %}

Good:

{% code title="app.component.ts" %}

```typescript
import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private userService: UserService) {}
}

```

{% endcode %}

## Services in Components

* Components get services through DI
* Each component has it's own Injector to do DI
* Injectors can only inject services they know about.
* Injectors are notified of services via the component's providers meta data
* Injectors are hierarchical, just like components and modules
* If a component doesn't provide the service, it goes up the parent tree until it finds it or throws an error.

{% embed url="<https://stackblitz.com/edit/angular-fundamentals-ad2019-11dot5?file=src%2Fapp%2Fusers%2Fusers.component.ts&view=editor>" %}

{% hint style="info" %}
Best practice:  don't use the component's providers to provide services.  Provide it in a module or use ProvidedIn.
{% endhint %}

{% hint style="info" %}
ProvidedIn:`@Injectable({providedIn: 'root'})`[`providedIn`](https://angular.io/api/core/Injectable#providedIn) here tells Angular that the root injector is responsible for creating an instance of the service. Services that are provided this way are automatically made available to the entire application and don't need to be listed in any module.
{% endhint %}

## DI with @Host or @Optional

```typescript
// standard
constructor(private userService: UserService){}

// Restrict Injector hierarchy search to the parent
constructor(@Host() private userService: UserService){}

// Return null if provider not found (instead of throwing an error)
constructor(@Optional() private userService: UserService){}

```

The @Host() decorator limits the hierarchy search up to the parent component injector.  If not found, will throw an error.  The @Optional() decorator returns null if the provider is not found in the hierarchy tree instead of throwing an error.

## Summary

* What is a service
* Creation of services
* What is DI
* Services in Components
* DI decorators