Interview Questions
Angular Interview Questions and Answers
Angular interviews test whether you understand its opinionated structure -- dependency injection, the component lifecycle, and change detection -- not just whether you can bind data to a template.
Example: A component with dependency-injected service
TypeScript@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private http: HttpClient) {}
getUser(id: number): Observable<User> {
return this.http.get<User>(`/api/users/${id}`);
}
}
@Component({ selector: 'app-profile', templateUrl: './profile.component.html' })
export class ProfileComponent implements OnInit {
user?: User;
constructor(private userService: UserService) {} // Angular injects this automatically
ngOnInit(): void {
this.userService.getUser(1).subscribe(u => this.user = u);
}
}Frequently Asked Questions
Angular's DI system supplies a class's dependencies (like UserService above) automatically based on its constructor, rather than the class creating them itself with 'new'. This makes components easier to test (you can inject a mock service instead of a real one) and keeps services as reusable, centrally-managed singletons rather than duplicated instances.
A Component controls a piece of UI -- it has a template, styles, and view-related logic. A Service holds logic and data that isn't tied to any specific view -- API calls, shared state, business logic -- and gets injected into whichever components need it, avoiding duplicating that logic across multiple components.
ngOnInit (runs once, after Angular has set the component's input properties -- the standard place for initial data fetching, as shown above), ngOnChanges (runs whenever an @Input value changes), ngOnDestroy (runs just before the component is removed -- the place to unsubscribe from Observables to avoid memory leaks), among several others for finer-grained lifecycle control.
RxJS is a library for working with asynchronous event streams (Observables) using composable operators (map, filter, switchMap, etc.). Angular's HttpClient returns Observables (not Promises) for HTTP calls, and the framework's reactive forms and event handling lean on the same model -- learning RxJS's operators well is a major part of becoming productive in Angular.
A Promise resolves once, with a single value. An Observable can emit multiple values over time, and is lazy -- it doesn't start executing until something subscribes to it (a Promise starts executing immediately when created). Observables are also cancellable (unsubscribe), which Promises natively are not.
The mechanism that decides when to re-check the component tree and update the DOM to reflect data changes. By default it runs broadly on relevant browser events; the OnPush change detection strategy restricts a component to only re-check when its @Input references change or an event originates from within it, which can meaningfully improve performance in large applications.
Template-driven forms build form logic mostly in the HTML template with directives like ngModel -- simpler for basic forms. Reactive forms define the form's structure and validation explicitly in the component class (FormGroup, FormControl) -- more verbose but more testable and better suited to complex, dynamic forms.