# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://briebug.gitbook.io/angular-fundamentals/angular-services.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.