Components & ModulesBeginner
1Question 1 of 1
typescriptHow do Angular Standalone Components and Dependency Injection work in modern Angular?
Explanation & Concept
Modern Angular (v14+) simplifies the framework with **Standalone Components**: components that directly import their dependencies (Directives, Pipes, other components) without declaring `NgModule`s.
Angular's hierarchical dependency injection provides singleton or component-scoped services via `@Injectable({ providedIn: 'root' })`.
Code Example
typescript
import { Component, Injectable } from "@angular/core";
import { CommonModule } from "@angular/common";
@Injectable({ providedIn: "root" })
export class DataService {
getData() { return ["Angular 17", "Standalone", "Signals"]; }
}
@Component({
selector: "app-feature",
standalone: true,
imports: [CommonModule],
template: `
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
`
})
export class FeatureComponent {
items: string[];
constructor(private dataService: DataService) {
this.items = this.dataService.getData();
}
}How It Works & Key Takeaways
Standalone components make tree-shaking much more aggressive and eliminate the conceptual overhead of Angular `NgModule`s.
Mock Test · 1 Questions · Optional
Ready for RxJS & Observables?
Take a quick test to evaluate yourself, or move straight to the next module.
Beginner3 questions