[Angular] Understanding the Angular Component providers property

Let's say we have App.component.ts, it use provider inside component level:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  providers: [LoadingService]
})
export class AppComponent implements  OnInit { }

 

What is mean is that all the child components under App component tree, will have 'LoadService' available. But the child component must appear in Template.

<app>
  <course-dialog></course-dialog>
</app>

In this case, if we want to use "LoadService" inside 'CouseDialog' component, we don't need to add 'providers' in 'CourseDialog' component.

 

But we don't have '<course-dialog>' inside template. Instead we open dialog component like:

const dialogRef = this.dialog.open(CourseDialogComponent, dialogConfig);

It open the dialog dynamicly. Then we have to use providers.

@Component({
  selector: 'courses-card-list',
  templateUrl: './courses-card-list.component.html',
  styleUrls: ['./courses-card-list.component.css'],
  providers: [LoaderService]
})
export class CoursesCardListComponent { }