Angular 19 Beginner to Expert: Interview Q&A, E-Commerce '26

Understand the Angular component architecture from the root app component in a tree-like hierarchy, with its HTML, CSS, and TS files, and how routing and standalone components drive the app.

Understand angular's component-based architecture, where each component contains html, TypeScript, css, and a testing file, and how app component acts as the parent for others, distinct from index html.

Bind dynamic messages from the TypeScript component to the HTML template using interpolation with double curly braces, showing how the title and message variables render in the HTML.

Explore Angular interpolation, binding component data to the view with double curly braces, showing expressions, handling undefined or null as an empty string, and performing string concatenation with ternary expressions.

Demonstrate calculating and displaying the sum of two class member numbers in an Angular component, using this to access a and b, render in HTML, and style with CSS.

Explore property binding in Angular 19, including setting element properties and sharing values, differences from interpolation for strings, binding boolean attributes like aria-label, and binding multiple properties at once.

Bind the image src to a component variable using a path from the assets folder, display the bound angular jpeg at 400 by 700 pixels, centered with css.

Bind the click event in Angular to call a function that displays an alert message, illustrating one-way binding and how to pass a parameter value.

Explain how event binding transfers data from dom to component and triggers the bound method, and contrast it with property binding that sends data from component to dom.

Create a simple Angular 19 counter with increment and decrement buttons, a counter function triggered on clicks, count initialized to zero, and display via interpolation.

Explore binding various mouse events in Angular 19, including double click, mouse over, mouse leave, mouse down, mouse up, drag and drag over. Update a counter via interpolation.

Learn to bind keyboard events in Angular 19, including key press, key down, key up, enter, focus, and select; explore copy paste, blur, and cut as well.

Discover how the Angular event object captures keypress and keyup details, including the input value via event.target.value, and how to pass the event object from template to the component.

Understand the Angular event object, the DOM event passed to handlers, including accessing input values with event.target.value, preventing defaults, and common use cases such as mouse position and key events.

Learn how to detect shift plus y with Angular key down event binding, using dot shift dot y and an event object approach to trigger a message.

Learn to build an Angular 19 counter that increments and decrements with the up and down arrow keys by handling keydown events, using the event object and tabindex for focus.

Learn how two-way binding with ngModel synchronizes data between the view and the model using the forms module, and how to avoid pitfalls like tight coupling and performance issues.

Demonstrates two-way binding in Angular by capturing an input field value with ngModel and displaying it on button click using a dynamic value bound to the input.

Demonstrate a simple cart calculation with two way binding, updating the total price as quantity changes, binding quantity to input and displaying price per item with a read-only total price.

Explore Angular directives, including structural, attribute, and component directives, and learn how built-in and custom directives shape the dom and enable two-way binding with ng model.

Master structural directives like ngIf to conditionally render or remove dom elements, import the common module, and implement dynamic, responsive conditions to control user interface output.

Explore the ngIf structural directive to conditionally render elements. Compare its DOM removal performance with css display none and learn using as to store a local username variable.

Implement show and hide in Angular 19 with the *ngIf directive by toggling a display element via a button; explore both a traditional method and an inline, single-line approach.

Use if and else in the template for conditional rendering to show or hide elements and render employees. Toggle visibility with at if and at else, and compare with ngIf.

The Ng4 directive iterates arrays or objects to display each item's id and name using a loop variable. It repeats the element for every item, simplifying rendering versus traditional loops.

Explore how the ngFor directive iterates over a collection to generate HTML elements, tracks the index, and optimizes rendering with track by function, including nested loops.

Explore Angular control flow statements and the new for loop statement that render templates based on data, with a mandatory track by function, dollar index, and empty keyword.

Explore the ngSwitch directive to conditionally render views based on expressions, with ngSwitchCase matching, a single ngSwitchDefault fallback, and when to prefer ngSwitch over ngIf for multiple conditions.

Use the ng switch template syntax to render employee data from a role dropdown, binding the role to a property and defining cases for admin, marketing, developer, and analyst.

Implement age validation in Angular 19 using ngSwitch and ngModel with a forms module to read user input and display eligible or not eligible to vote based on age.

Learn how attribute directives like ngClass and ngStyle dynamically apply or remove CSS classes and styles, using strings, arrays, or objects and reacting to input events.

Explore the ngStyle attribute directive to apply dynamic inline CSS in Angular, using key-value pairs, variables, and object literals to update styles based on conditions and interactions.

Use ngStyle to dynamically color input fields based on name and email input, with ngModel bindings, an input event-driven validation, and a submit message shown via ngIf.

Explore the ng template and ng container directives to create reusable template blocks, access them with reference variables, and use ng if to render authorized messages and no-item scenarios.

Explain the difference between ng-template and ng-container, noting that ng-template defines a reusable template not rendered until a condition such as ngIf or ngFor applies.

Explore displaying a message when the input is empty using ng-container and ng-template with ngIf in Angular 19, binding the input with ngModel and styling a focus-moving label.

Explore how the ng template outlet directive renders templates dynamically inside components, using a context object to pass data, functions, and object literals, then access them with let syntax.

Learn how to render templates with ngTemplateOutlet using the dollar implicit keyword to supply a default template context, access data with let syntax, and display an employees table with ngfor.

Explore the ngTemplateOutlet directive, a structural Angular feature that inserts templates dynamically into a view. Pass data with context; use implicit and let for multiple values; null renders nothing.

Build a simple portfolio builder by creating an html form with personal information and qualifications, then load a ready template and preview on submit.

Apply CSS to a portfolio form by styling fonts, centering the h1, and building a responsive flex layout for inputs and labels, plus a preview with an absolute edit button.

Bind the template to the component with two-way ngModel for name, contact, and a dynamic qualifications array, enabling add, submit, preview, and edit flows in a responsive portfolio builder.

Explore how ngOnChanges hook detects input changes and exposes previous and current values. Bind parent to child with input value, implement on changes, and log previous, current, and first change.

Learn how ngOnChanges detects changes to input properties in Angular, runs before initialization, and differs from ngOnInit, which runs after the first change detection cycle and targets only @Input properties.

Understand how the ngOnChanges hook uses the SimpleChanges object to track previous and current values of an input property and reflect parent-to-child data flow in the template.

Angular simple changes tracks input property updates, exposing previous and current values via the changes object. It captures only the latest update before change detection and detects reference changes, not internal edits.

Explore the ngOnInit lifecycle hook in Angular, illustrating that it runs after component initialization and before the view renders, and contrast it with the constructor for safe initialization.

Discover why ngOnInit is the preferred place to fetch data from an API, and compare it with the constructor. Learn that inputs bind after initialization and ngOnInit runs once.

Implement the ngDoCheck hook to perform custom change detection in Angular, detect changes to user.name, compare with a previous value, and learn why ngOnChanges and ngDoCheck should not be combined.

Learn how ngDoCheck serves as a customizable change detection hook that runs every cycle. Compare it to ngOnChanges and apply it to deep changes, arrays, and external state.

Learn how the ngAfterContentInit hook fires during content projection, using the ng-content directive to pass HTML from parent to child and initialize projected content once per lifecycle.

Explore how the ngAfterViewInit hook runs after a component and its template render, enabling dom tasks via view child and elementRef to style and access the wrapped content.

Explore ngAfterViewInit hook in Angular, its role after the component and child views render, and how to avoid expression has changed after it was checked with delayed updates using setInterval.

Explain how the ngAfterViewChecked hook runs after each change detection cycle, after the view is initialized, to verify the view and perform dom tasks.

Learn how the ng destroy hook cleans up a component before destruction, preventing memory leaks by clearing local storage, stopping timers, and other cleanup tasks, shown via a show/hide demo.

Discover how Angular decorators attach metadata to component classes using the at sign, and explore the four types—class, property, method, and parameter decorators—to guide runtime processing.

The @Component decorator marks a class as an Angular component with metadata, including selector, standalone, imports, template URL, style URL, and enables using router outlet and common module.

Learn how the @Input() decorator marks a property as input to enable parent-to-child data flow, bind properties with property binding, and update the child when the parent changes.

Master the @Input decorator to pass data from parent to child with square bracket binding. Understand primitive and object change tracking and alias input property names for flexible binding.

Learn how to pass an object from a parent to a child in Angular 19 using the @Input() decorator, then display the courses data in a table and as JSON.

Explain how the @Output decorator enables child-to-parent data flow by emitting events with an event emitter, and show how the parent captures data via the event object in binding.

Show sharing items from a parent to a child with @Input and @Output, adding and deleting items. Include EventEmitter<number>, ngOnInit, ngOnDestroy, and ngIf for conditional rendering.

Explore how Angular's view child decorator enables accessing a child component and specific DOM elements to perform query operations and DOM manipulation, with examples using after view init.

Explore the @ViewChild decorator to interact with child components, properties, methods, and template elements, enabling data passing and dom manipulation via ngAfterViewInit.

Shows how to use the content child decorator to access projected content, style it via after content init, and contrast with view child using a paragraph reference.

Bind host element styles with the host binding decorator in a custom directive, applying background color and text color via style properties on the hosted element.

Explore Angular method decorators and HostListener to bind class methods to host events, enabling dynamic color changes with HostBinding and random color logic.

Explore how parameter decorators decorate constructor parameters to inject services and metadata in Angular. Learn how dependency injection wires services into components using the inject decorator and other parameter decorators.

Learn how Angular pipes transform data in templates, using built-in pipes for uppercase, lowercase, dates, and more; understand pipe syntax, chaining, and order of execution.

Understand how Angular's built-in slice pipe extracts substrings or subarrays by start and end indices, including negative indices, and apply it to strings and arrays in templates.

Explore how to implement simple page navigation in Angular using the slice pipe, with a products array, start and end indices, and previous/next controls to display four items per page.

Learn page navigation using the slice pipe to paginate a product grid of styled cards, with responsive images and accessible controls in Angular 19.

Format numbers with the built-in number pipe, controlling digits before and after the decimal and the maximum length. Apply formats to variables like pi for displaying rounded values in prices.

Use the json pipe to convert an object literal to a json string and format it with pipes like uppercase. Use for debugging and remove production to avoid exposing data.

Implement a feature that converts table data into a json string and displays it on demand using a toggle button, Angular template bindings, and the json pipe.

Learn to create custom pipes in Angular by generating a pipe, implementing the transform method, and appending text to input values, with pipe.ts and pipe.spec.ts and test basics.

Understand the pipe decorator in Angular, including its metadata and name argument with optional parameters. Learn how the pipe transform interface defines the transform method to implement custom pipes.

Create an Angular custom pipe named sort numbers to sort a numbers array in ascending or descending order using a transform method and a union type for the sort order.

Create a custom pipe named letter count to transform a string into letter count. Implement the transform to iterate characters, check letters via ASCII ranges, and return count.

Learn how Angular pipes transform data before display. Compare pure and impure pipes and how they update on input changes and change detection cycles.

Explore the difference between pure and impure pipes, and learn why impure pipes are needed when mutating an input array on change detection with a custom sum of numbers pipe.

Create a simple Angular route by generating a home component, configuring the routes array with path 'home' and component, and using router-outlet to render the routed content.

Understand how the router outlet acts as a directive placeholder that renders the active route's component, and learn where to place it for nested or named outlets.

Bind routes with the router link directive to navigate between views. Apply it to an anchor tag or any clickable element to update the URL.

Explore how the routerLink directive enables in-app navigation between components or views with Angular's router, updating the URL without page reloads and maintaining application state for smooth client-side routing.

Build a simple navbar with routes for multiple sections like home, about, work, news, services, and contact, using router links and a router outlet to display content.

Explore dynamic routing in Angular by passing route parameters through the url to capture and display employee data, including name, department, and id, via a router outlet.

Explore static versus dynamic routing in Angular 19, with fixed component mappings and adjustable routes via route parameters using colon syntax to create dynamic routes.

Define and navigate nested routes in Angular using the children property to create multiple child routes, and router link directive; render child components with the router outlet as the placeholder.

Create a multi-level drop down menu for an e-commerce app by nesting product routes (shirts, pants, shoes) under products with shared templates, CSS, and router outlets.

Learn to redirect routes in angular with redirectTo, set a default root using an empty path, and control matching with pathMatch (full or prefix), plus fallback via a wildcard route.

Explain how the redirectTo property routes users to a different path and how pathMatch uses prefix or full values to match URLs, such as redirecting the root URL to /home.

Fetch the currently activated route information in an Angular component using ActivatedRoute, accessing route and query parameters and metadata, and note that snapshot provides a static, one-time, synchronous view.

Learn how query parameters pass optional data through the url in Angular routing, observe changes with activated route and observable, and display them via router links.

Learn to pass and receive query parameters in Angular with the query params property, subscribe via ActivatedRoute for reactive updates, or use snapshot for changes such as product filters.

Navigate between views using the Angular router service, leveraging the navigate method and query params to pass id and name to an employee detail component.

Explore the navigate() method to programmatically route in Angular using the router service, including dynamic query parameters, conditional navigation, and clearing existing query parameters.

Explore building an Angular course detail view that displays course information and fetches query parameters via ActivatedRoute, showing id, name, and price in the URL and console.

Create an Angular employee service to share reusable logic via dependency injection, fetch all employees, find by id, and inject it into a component to display details.

Create a service to reuse data and business logic across multiple components, using constructor injection to let Angular's dependency injection provide the service instance when a component is instantiated.

Explore dependency injection in Angular by injecting a product service into a component using constructor injection, returning a string array, and displaying it in a template to improve code reuse.

The injectable decorator enables and configures dependency injection for a class, marking it as injectable and signaling that components, pipes, or modules have a dependency on a service.

Register providers at module, service, and component levels to control singleton versus component-scoped instances. Learn dependency injection with power and cube services and the providers array.

Explore how providers enable dependency injection in Angular, registering and configuring dependencies for components and services, and define providers at component, module, and service levels, including providedIn root.

Explore how the inject function enables dependency injection directly in angular standalone components and functional services, without a constructor, enabling lazy loading.

Learn how injection tokens uniquely identify providers in Angular. Understand the use class property, the provide versus use class distinction, and why the last provider wins when tokens repeat.

Register string tokens as providers and inject them with the inject decorator in the constructor, replacing type tokens; avoid reusing the same string token for multiple providers.

Define a string token with the provide property and inject it using the inject decorator. Use the inject decorator as a constructor parameter to specify custom providers or dependencies.

Define and use an injection token object as a provider token for non-class dependencies, enabling typed tokens such as log message service via the providers array with inject decorator.

Learn the difference between string tokens and injection token objects in Angular 19, and discover why using token objects with value improves type safety, tree shaking, and avoids naming conflicts.

Discover how the value provider injects a specific runtime value as a dependency using a string token and greeting message. Use this technique for runtime configuration constants like API addresses.

Explore the differences between useValue and useClass in angular dependency injection, where useValue provides a constant dependency and useClass creates a new instance of the specified class.

Inject a constant value as a dependency in Angular 19 using a use value property for a static admin data object. Display id, name, department, and position.

Map one token to another using the useExisting alias in Angular 19, reusing alert message functionality across two service files and triggering show alert via injection.

Explore why the use existing property is used to provide an alias for an existing service, enabling sharing of the implementation among different tokens.

Discover how the useFactory property defines a dependency or non-class value with a factory function, enabling custom logic, dependency injection, and configuration for asynchronous runtime data.

explain the use factory property by defining a factory function that returns a service instance or value, enabling dynamic object creation and configuration.

Learn how the deps property works with the useFactory provider to inject dependencies into a factory function, creating app config and app update services via dependency injection and tokens.

Explain the deps property: it configures dependencies for the factory function to enable dependency injection and is optional if no external dependencies are needed.