How to inject a service into a component in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Injecting services into components is the foundation of Angular’s dependency injection system and essential for sharing data and business logic across components. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented service injection patterns in thousands of Angular components over 25 years of development. From my expertise, the most straightforward approach is declaring the service as a parameter in the component constructor with proper access modifiers. This automatically injects the service instance and makes it available throughout the component.
Declare the service in the component constructor to inject it via dependency injection.
export class MyComponent {
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.getData().subscribe(data => {
console.log(data)
})
}
}
Here the DataService is injected through the constructor parameter with the private access modifier, which automatically creates a class property. Angular’s dependency injection system provides the service instance based on the type annotation. The service is then available as this.dataService throughout the component for data operations and business logic.
Best Practice Note:
This is the same dependency injection pattern we use throughout CoreUI Angular components for clean service integration.
Use private for services only used within the component, protected for services accessed by child classes, and avoid public unless the service needs template access for better encapsulation.
