Best practice for sharing signals from service to components

I have a signal in a service that I need to access in my component (both TypeScript and HTML). What's the best way?

Service:

@Injectable({ providedIn: 'root' })
export class DataService {
count = signal(0);
}


Component:

export class MyComponent {
dataService = inject(DataService);

logValue() {
console.log(this.dataService.count());
}
}


Template:

<p>{{ dataService.count() }}</p>


Is this the best way to access a service signal in Angular components? The signal updates properly and everything works, but want to make sure I'm not forgetting about any potential downside.

Continue reading...