Loading
MindXchange
MindXchange
MindXchange

Quipoin Menu

Learn • Practice • Grow

Tutorial Exercises MCQs Interview Q & A Tests
angular / ngFor Directive
interview
ChapterExercisesMCQVideosDiscussion

Q1. What is *ngFor directive?
*ngFor is a structural directive that repeats a template for each item in a collection. It''s used to render lists. Basic syntax: 
  • {{ item }}
    •
    Angular creates a new DOM element for each item.
    Q2. What is trackBy in *ngFor and why use it?
    trackBy is a function that helps Angular optimize list rendering by identifying items uniquely. Without trackBy, Angular rebuilds the entire list if the array changes. With trackBy, it can reuse DOM elements based on a unique identifier. Example: 
  • {{ item.name }}
    •
    In component: 
    trackById(index, item) { return item.id; }

    Q3. What local variables are available in *ngFor?
    *ngFor provides several local variables: index (position), first (boolean), last (boolean), even (boolean), odd (boolean). Example: 
  • 
  {{ i }}: {{ item }} {{ f ? ''(first)'' : '''' }}

    •

    Q4. Can you nest *ngFor directives?
    Yes, you can nest *ngFor loops to render multi-dimensional data. Example: 
    
  {{ cell }}
    Be mindful of performance with deeply nested loops.
    Q5. How does *ngFor work with arrays and observables?
    *ngFor works directly with arrays. For observables, combine with async pipe: 
  • {{ user.name }}
    •
    The async pipe subscribes and handles unsubscription automatically.