Typescript dependency injection public vs private
AngularTypescriptAngular Problem Overview
What is the difference between injecting service with public and private.I see most of examples use private keyword in angular component. Would it have any implications of using public? e.g.
constructor(public carService: CarService) { }
vs.
constructor(private carService: CarService) { }
Angular Solutions
Solution 1 - Angular
In addition to the prior answer ... anything marked as private cannot be accessed by the component's template either. (Private members can be accessed when using JIT, such as at development time, but not when using AOT, such as for production.)
So in your template, you could only do *ngIf='carService.isValid'
if the injected service was marked as public
.
But actually, best practice is to wrap any service properties/methods in a component property/method anyway and have the template bind to/call the component's property or method.
Something like this:
get isValid(): boolean {
return this.carService.isValid;
}
And then access it like this: *ngIf='isValid'
Solution 2 - Angular
The answer is pretty simple: you have to create private variables when you don't need to use them outside of current class/component, otherwise, you should create public variables. And one more thing: you can also use private variables and give access to them from outside via special functions called getters and setters. For example:
private _customValue: any;
set customValue(newValue: any): void {
this._customValue = newValue;
}
get customValue(): any {
return this._customValue;
}
Notice, that _customValue
is private, but you can set/get this value from outside the class via operations with customValue
:
classInstance.customValue = 'newValue';
console.log(classInstance.customValue);
Need to say, that set
and get
keywords before method names are not strongly needed, they are more for clarification.
Solution 3 - Angular
For cases when you have a service for example:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CarService {
constructor() { }
public design = {
"color": "blue"
}
}
And in your constructor where your are going to implement the service
constructor(private carService: CarService) { }
You can use a normal method for return the service
getCarService() {
return this.carService;
}
And in your template you can do
<div>{{getCarService().design.color}}</div>