Providers functionality in angular

Question

I created a component and service in my project. According to documentation while using the service you should include it in providers metadata of the component where you are going to inject it. However, I noticed it works fine if I don't mention it in the metadata of my Component. I am not able to gauge the reason why is it happenning.

I read this from one of StackOverflow answer on a similar question

If you haven't provided it in the component that you are using then it will go to it's parent component, up to the module that it's been used until it finds the instance. Each level has its own map of provider instances and the component will use the first instance that it finds when it traverses the injection tree upwards.

I looked in my whole application if that's the case but didn't get anything such as that.

Component module: card.component.ts

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { BoxesService } from '../boxes.service';
import { Box } from '../box';
import { HeaderTitleService } from '../header-title.service';
//import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css'],
  providers: []
})
export class CardComponent implements OnInit {
  //@Input() boxes: Box[] = [];

  public selectedBox: Box = { name : '', text : '', id:0};
  public boxes: Box[] = [];
  private header = "Total Cards displayed : " + this.boxes.length;

  constructor(private boxData: BoxesService, private headerService: HeaderTitleService) { }

  private getBoxes(): void {
    this.boxes = this.boxData.getBoxes();
  }

  public ngOnInit(): void {
    this.getBoxes();
    this.header = "Total Cards displayed : " + this.boxes.length;
    this.headerService.setTitle(this.header);
  }

  public onClick(box: Box) {
    this.selectedBox = box;
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CardComponent } from './card/card.component';
import { HeaderComponent } from './header/header.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CardDetailComponent } from './card-detail/card-detail.component';

@NgModule({
  declarations: [
    AppComponent,
    CardComponent,
    HeaderComponent,
    DashboardComponent,
    CardDetailComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Service class: boxes.service.ts

import { Injectable } from '@angular/core';
import { Box } from './box';

@Injectable({
  providedIn: 'root'
})
export class BoxesService {
  private boxes : Box[] = [
    { name: 'box1', text: 'test data for box 1', id: 1 },
    { name: 'box2', text: 'test data for box 2', id: 2 },
    { name: 'box3', text: 'test data for box 3', id: 3 },
    { name: 'box4', text: 'test data for box 4', id: 4 },
    { name: 'box5', text: 'test data for box 5', id: 5 },
    { name: 'box6', text: 'test data for box 6', id: 6 },
    { name: 'box7', text: 'test data for box 7', id: 7 },
    { name: 'box8', text: 'test data for box 8', id: 8 },
    { name: 'box9', text: 'test data for box 9', id: 9 },
    { name: 'box10', text: 'test data for box 10', id: 10 },
  ]

  getBoxes(): Box[]{
    return this.boxes;
  }

  constructor() { }
}

Having a hard time trying to understand this concept, stuck with it for the last one day.

Answer 1

It is quite simple. If you have the providedIn: 'root' inside the service, it will be available for use to the entire Angular application.

@Injectable({
  providedIn: 'root'
})

If you wish to use it inside a particular component, you need to add it inside the providers array inside the respective component.ts file.

Hope this answers your query.

Answer 2

The answer you are referring is very old. This is changed a lot. Please go through this link

The reason its working in your case is providedIn: 'root' this is registering your service at the root level

Please go through this documentation

https://angular.io/guide/providers