Typescript dependency injection public vs private

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'

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.

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>