Typescript dependency injection public vs private

AngularTypescript

Angular 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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionVimal TrivediView Question on Stackoverflow
Solution 1 - AngularDeborahKView Answer on Stackoverflow
Solution 2 - AngularCommercial SuicideView Answer on Stackoverflow
Solution 3 - AngularapaterninaView Answer on Stackoverflow