CODEWITHSUNDEEP
angulardependency-injectionangular-dependency-injection
Andrew
Andrew

Reputation: 1575

How to inject object that has constructor parameters in Angular?

I'm very to Angular and I want to figure out how can I pass parameters to an object constructor that is being injected into a component.

Here is an example:

image-capture.service.ts

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

  constructor(
    private sdk: any,
    private videoSource: HTMLVideoElement,
    private cameraFeedback: HTMLCanvasElement) {}
}

image-scanner.component.ts

@Component({
  selector: 'app-document-scanner-component',
  templateUrl: './app-document-scanner-component.html',
  styleUrls: ['./app-document-scanner-component.scss'],
})
export class ImageScannerComponent {

  @ViewChild('video') video!: ElementRef<HTMLVideoElement>;
  @ViewChild('cameraFeedback') feedback!: ElementRef<HTMLCanvasElement>;

  constructor(private imageCaptureService: ImageCapture) { }

}

in image-scanner. component i need to pass to injected object ImageCapture few constructor parameters one is SDK instance that is being imported and second two parameters are HTML DOM elements that I'm getting using @ViewChild decorator.

How can I achieve this?

Upvotes: 0

Views: 1277

Answers (1)

Soukyone
Soukyone

Reputation: 577

You cannot pass paramaters to the constructor of the service, because your service is created on loading of the application. So when you use your service inside a component, the service is already instantiated.

A solution is to create a function in your service:

public initialize(sdk: any,videoSource: HTMLVideoElement,cameraFeedback: HTMLCanvasElement) {}

then you juste have to call this function, in the constructor of your component.

Upvotes: 1

Related Questions