Project 6: Testimonial Slider

Angular Engineer

Builds on these lessons

Component Task

Objective

Structural directives change the DOM's shape. *ngIf adds or removes an element based on a condition; *ngFor repeats an element once per item in a list. Both come from CommonModule.

You're building a testimonial list.

Task: write a TestimonialsComponent (selector app-testimonials) that shows a fallback paragraph when the testimonials array is empty, and otherwise lists each one in an <li>.

component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-testimonials',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p *ngIf="testimonials.length === 0">No testimonials yet.</p>
    <ul>
      <li *ngFor="let t of testimonials">{{ t }}</li>
    </ul>
  `
})
export class TestimonialsComponent {
  testimonials = ['Great product!', 'Changed my workflow.'];
}

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →