NG
Dependency
Injection

Services

  • fetch data from web services / local storage, etc.
  • share information among classes
  • wrap and implement any logicĀ 

Dependency Injection

ng generate service app

Let's generate a service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class AppService {

  ...

}

@Injectable

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class AppService {

  private videos = [];
  
  getVideos(): any[] {
    return this.videos;
  }

}

@Injectable

import { Component, OnInit } from '@angular/core';
import { AppService } from '../app.service';

@Component({
  ...
})
export class VideosComponent implements OnInit {

  videos: any[] = [];
  constructor(private appService: AppService) { }

  ngOnInit() {
    this.videos = this.appService.getVideos();
  }
}

@Component

Angular DI Workshop Presentation

By Konstantin Malikov

Angular DI Workshop Presentation

  • 259