Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the lifecycle of a service in Angular 5

Angular 5

When is a service created and destroyed, what are its lifecycle hooks (if any) and how is its data shared between components?

EDIT: To clarify, this is NOT a question about the lifecycle of components. This question is about the lifecycle of services. In case a service does not have a lifecycle, how is the flow of data between components and services managed?

like image 713
rahs Avatar asked Apr 27 '18 06:04

rahs


People also ask

What is lifecycle of a service in Angular?

Lifecycle hooks are a special functionality in Angular that allow us to “hook into” and run code at a specific lifecycle event of a component or directive. Angular manages components and directives for us when it creates them, updates them, or destroys them.

What is component lifecycle in Angular?

Component Lifecycle. A component has a lifecycle managed by Angular itself. Angular manages creation, rendering, data-bound properties etc. It also offers hooks that allow us to respond to key lifecycle events.

How many lifecycle methods does Angular offer?

There are eight lifecycle hooks in Angular: ngOnChanges() ngOnInit() ngDoCheck()


2 Answers

Service can have 2 scopes.

If service is declared on your module, you have same instance shared for all, this means service will be constructed when the first component/directive/service/Pipe who needs it will be created. Then it will be destroyed when Module itself will be destroyed (most of the time when page is unloaded)

if the service is declared on Component/Directive/Pipe, then 1 instance will be created each time when Component/Directive/Pipe will be created and destroyed when related Component/Directive/Pipe will be destroyed.

You can see it in action

Code testing : 2 services are made for showing when they are created/destroyed.

@NgModule({   providers: [GlobalService] // This means lifeCycle is related to the Module, and only one instance is created for the whole module. It will be created only when the first element who needs it will be created. }) export class AppModule { } 

Second service is a local component service and will be create for each hello-component instance created, and will be destroyed just before hello-component will be destroyed.

@Injectable() export class LocalService implements OnDestroy{   constructor() {     console.log('localService is constructed');   }    ngOnDestroy() {     console.log('localService is destroyed');   } }  @Component({   selector: 'hello',   template: `<h1>Hello {{name}}!</h1>`,   styles: [`h1 { font-family: Lato; }`],   providers: [LocalService] }) export class HelloComponent implements OnInit, OnDestroy {   @Input() name: string;    constructor(private localService: LocalService, private globalService: GlobalService) {}    ngOnInit(){     console.log('hello component initialized');   }    ngOnDestroy() {     console.log('hello component destroyed');   } } 

As you can see, Service in angular can have OnDestroy life cycle hook.

like image 82
Yanis-git Avatar answered Sep 29 '22 10:09

Yanis-git


Services only live inside the scope of their providers, so in the scope of a module or a single component. They are instantiated when injected for the first time and keept alive as long as the provider exists.

As services are normal classes, angulars lifecycle hooks do not apply to them.

like image 38
Fussel Avatar answered Sep 29 '22 10:09

Fussel