Angular Dependency Injection: Complete Guide - https://blog.angular-university.io/angular-dependency-injection

01.ts

export class CoursesService() {

   http: HttpClient;

   constructor() {
     this.http = new HttpClient(... dependencies needed by HTTPClient ...);
   }
...
}

02.ts

@Injectable()
export class CoursesService() {

   http: HttpClient;

   constructor(http: HttpClient) {
     this.http = http;
   }
...
}

03.ts

export class CoursesService() {

   http: HttpClient;

   constructor(http: HttpClient) {
     this.http = http;
   }
...
}

04.ts

@Component({
    selector: 'course-card',
    templateUrl: './course-card.component.html',
    styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent  {

    constructor(private coursesService: CoursesService) {
      ...
    }
    ...
}

05.ts

function coursesServiceProviderFactory(http:HttpClient): CoursesService {
  return new CoursesService(http);
}

06.ts

export const COURSES_SERVICE_TOKEN = 
      new InjectionToken<CoursesService>("COURSES_SERVICE_TOKEN");

07.ts

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  providers: [
      {
      provide: COURSES_SERVICE_TOKEN,
      useFactory: coursesServiceProviderFactory,
      deps: [HttpClient]
    }
    ]
})
export class CoursesModule { }

08.ts

@Component({
    selector: 'course-card',
    templateUrl: './course-card.component.html',
    styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent  {

    constructor( @Inject(COURSES_SERVICE_TOKEN) private coursesService: CoursesService) {
      ...
    }
    ...
}

09.ts

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  providers: [
      {
      provide: CoursesService,
      useFactory: coursesServiceProviderFactory,
      deps: [HttpClient]
    }
    ]
})
export class CoursesModule { }

10.ts

@Component({
    selector: 'course-card',
    templateUrl: './course-card.component.html',
    styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent  {

    constructor( @Inject(CoursesService) private coursesService: CoursesService) {
      ...
    }
    ...
}

11.ts

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  providers: [
      {
      provide: CoursesService,
      useClass: CoursesService,
      deps: [HttpClient]
    }
    ]
})
export class CoursesModule { }

12.ts

@Component({
    selector: 'course-card',
    templateUrl: './course-card.component.html',
    styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent  {

    constructor(private coursesService: CoursesService) {
      ...
    }
    ...
}

14.ts

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  providers: [
    CoursesService
  ]
})
export class CoursesModule { }

15.ts

@Injectable()
export class CoursesService() {

   http: HttpClient;

   constructor(http: HttpClient) {
     this.http = http;
   }
...
}

16.ts

@Component({
  selector: 'choose-quantity',
  templateUrl: "choose-quantity.component.html",
  styleUrls: ["choose-quantity.component.scss"],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi:true,
      useExisting: ChooseQuantityComponent
    }
  ]
})
export class ChooseQuantityComponent implements ControlValueAccessor {

}

17.ts

let counter = 0;

@Injectable()
export class CoursesService() {

  constructor(private http: HttpClient) {
      counter++;
      this.id = counter;
  }
...
}

18.html

<div class="courses">

    <course-card *ngFor="let course of  courses "
                 [course]="course">

      <course-image [src]="course.iconUrl"></course-image>

    </course-card>

  </div>

19.ts

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

    constructor(private coursesService: CoursesService) {
      console.log(`App component service Id = ${coursesService.id}`);
    }
...
}

20.ts

@Component({
    selector: 'course-card',
    templateUrl: './course-card.component.html',
    styleUrls: ['./course-card.component.css'],
    providers: [
      CoursesService
    ]
})
export class CourseCardComponent {

    constructor(private coursesService: CoursesService) {
      console.log(`course card service Id = ${coursesService.id}`);
    }
...
}

21.ts

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

    constructor(private coursesService: CoursesService) {
      console.log(`course card service Id = ${coursesService.id}`);
    }
...
}

22.ts

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
      CourseCardComponent
  ],
    exports: [
        CourseCardComponent
    ],
    providers: [
      CoursesService
    ]
})
export class CoursesModule { }

23.ts

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        CoursesModule
    ],
    providers: [
      CoursesService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

24.ts

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
      CourseCardComponent
  ],
    exports: [
        CourseCardComponent
    ]
})
export class CoursesModule { }

25.ts

@Injectable({
  providedIn: CoursesModule
})
export class CoursesService() {

  constructor(private http: HttpClient) {

  }
...
}

26.ts

@Injectable({
  providedIn: "root"
})
export class CoursesService() {

  constructor(private http: HttpClient) {

  }
...
}

27.ts

@Component({
    selector: 'course-card',
    templateUrl: './course-card.component.html',
    styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent  {

    constructor(@Optional() private coursesService: CoursesService) {
      ...
    }
    ...
}

28.ts

@Component({
    selector: 'course-card',
    templateUrl: './course-card.component.html',
    styleUrls: ['./course-card.component.css'],
    providers: [
       CoursesService
    ]
})
export class CourseCardComponent  {

    constructor(@SkipSelf() private coursesService: CoursesService) {
      ...
    }
    ...
}

29.ts

@Component({
    selector: 'course-card',
    templateUrl: './course-card.component.html',
    styleUrls: ['./course-card.component.css'],
    providers: [
       CoursesService
    ]
})
export class CourseCardComponent  {

    constructor(@Self() private coursesService: CoursesService) {
      ...
    }
    ...
}

30.ts

@Directive({
    selector: '[highlighted]'
})
export class HighlightedDirective {

    constructor( @Host() private coursesService: CoursesService) {
        console.log('coursesService highlighted ' + coursesService.id);
    }
...
}

31.html

<div class="courses">

    <course-card *ngFor="let course of  courses " highlighted
                 [course]="course">

      <course-image [src]="course.iconUrl"></course-image>

    </course-card>

  </div>