Angular Developer interview questions

An Angular component is a class that controls a reusable part of the user interface.

• Its template describes the HTML Angular renders.
• Its class stores data and methods used by that template.
• The @Component decorator connects the class to its selector, template, styles, and dependencies.

The @Component decorator supplies Angular with the metadata needed to create and render a component.

• selector identifies the component in another template.
• template or templateUrl defines its view, while styles or styleUrl defines local styles.
• imports lists template dependencies when the component is standalone.

A component selector is a CSS selector Angular matches to a host element when it creates that component.

• A selector such as app-profile is used as an HTML element in a parent template.
• Angular creates the component instance and renders its view inside the matched host element.
• A unique, prefixed element selector helps avoid collisions with native HTML elements.

An inline template lives in the component metadata, while templateUrl points to a separate HTML file.

• The template property suits a very small view written directly in the TypeScript file.
• templateUrl keeps larger markup separate and easier to read.
• Both forms are compiled as the component view and support the same Angular template syntax.

A template can read accessible component fields and call component methods through its binding context.

• Interpolation and property binding read values from the class.
• Event binding can invoke a method or update a field.
• Template expressions should stay simple because Angular evaluates them while updating the view.

Interpolation renders the string value of a template expression between double curly braces.

• A binding such as {{ userName }} reads userName from the component context.
• Angular updates the displayed text when the bound value changes.
• Interpolation is intended for text content and string-valued bindings, not event handling.

Property binding sends a value from a component expression to a DOM, directive, or child component property.

• Square brackets mark the target property, as in [disabled]="isSaving".
• Angular preserves the expression's value type instead of converting everything to text.
• The view receives new values whenever Angular detects a relevant state change.

Property binding updates an object property, while attribute binding writes an HTML attribute value.

• [value] targets the live value property of an input element.
• [attr.aria-label] targets an attribute that may not have a matching DOM property.
• Setting an attribute binding to null removes that attribute.

Event binding runs a template statement when a DOM or component event occurs.

• Parentheses name the event, as in (click)="save()".
• The statement can call a component method or assign a value.
• Data flows from the event source back into the component rather than from the component into the view.

$event is the event payload Angular passes to a template event handler.

• For a native DOM event, it is the browser event object.
• For a component output, it is the value emitted by that output.
• The template can pass it to a typed component method for handling.

Two-way binding combines an input property binding with a matching change event binding.

• The banana-in-a-box syntax [(...)] displays a value and writes changes back.
• [(ngModel)] commonly synchronizes a form control with a component field.
• It is convenient for editable values but still represents two one-way flows.

Using [(ngModel)] requires the NgModel directive provided by Angular's FormsModule.

• An NgModule-based component imports FormsModule through its owning module.
• A standalone component adds FormsModule to its own imports.
• Inside a form, a bound control also needs a name so Angular can register it.

They connect a template and component in different directions and for different targets.

• Interpolation renders an expression as text.
• Property binding sends a typed value from the component to a property.
• Event binding sends notification data from the view or child component to a handler.

*ngIf conditionally adds or removes a template block according to an expression.

• A truthy condition creates the block and its Angular view.
• A falsy condition removes that view rather than merely hiding its elements with CSS.
• Modern Angular also offers built-in @if control flow, but *ngIf remains common in existing applications.

*ngIf can reference an ng-template as the block to render when its condition is false.

• The then branch is the element carrying *ngIf unless another template is named.
• The else option points to a template reference such as else emptyState.
• ng-template itself does not create a visible wrapper element.

*ngFor creates one embedded view for each item in an iterable collection.

• The let syntax exposes the current item to the repeated template.
• Local values such as index, first, and last describe each iteration.
• Modern Angular also offers built-in @for control flow, while *ngFor is still widely found in Angular codebases.

Stable item identity helps Angular reuse the correct DOM views when a collection changes.

• Without custom tracking, *ngFor normally compares items by object identity.
• A trackBy function can return a stable key such as a database ID.
• Reusing views preserves element state and avoids unnecessary DOM recreation.

Each structural directive shorthand expands into its own ng-template, so one host cannot represent two expansions at once.

• The asterisk syntax is shorthand for wrapping content in an Angular template.
• Nesting an ng-container provides a separate host for the second directive.
• Separating the directives also makes their evaluation order explicit.

An attribute directive changes the appearance or behavior of an existing element, component, or directive.

• It does not define a separate view like a component does.
• It is applied through an attribute selector on its host.
• NgClass and NgStyle are common built-in examples.

NgClass adds and removes CSS classes from an element based on a template expression.

• It can accept a class string, an array of class names, or an object of class conditions.
• Object keys are class names and truthy values enable those classes.
• A direct [class.active] binding is often simpler for one conditional class.