Module Recap

Module 02 covered the component model in depth: the @Component decorator, how templates connect to the class, @Input() and @Output() for communication, lifecycle hooks for setup and cleanup, and the standalone component architecture.

What you learned

A component is a TypeScript class + template + styles. The @Component decorator ties them together with a selector, templateUrl, and styleUrl. The selector is the custom HTML tag used to embed the component in other templates.

Templates have direct access to public class members. Properties and methods can be read via {{ }} interpolation, bound via [property] binding, and called via (event) binding. You will learn the full binding syntax in Module 03.

@Input() passes data down; @Output() sends events up. This unidirectional data flow is the backbone of component communication. Parents set inputs via property binding; children emit events via EventEmitter.

ngOnInit is where data fetching belongs. It fires after inputs are set, which means you have access to all the data you need. Constructors are for dependency injection only.

ngOnDestroy is where cleanup belongs. Unsubscribe from observables, clear timers, and release resources here to prevent memory leaks.

Standalone components declare their own dependencies. The imports array in @Component lists every component, directive, and pipe the template uses. There are no NgModules in modern Angular.

How this connects to CinemaVault

CinemaVault’s MovieCard demonstrates everything in this module:

@Component({
  selector: 'app-movie-card',
  standalone: true,
  imports: [RouterLink],
  templateUrl: './movie-card.html',
  styleUrl: './movie-card.css'
})
export class MovieCard {
  @Input({ required: true }) movie!: Movie;

  constructor(private watchlist: WatchlistService) {}

  get isInWatchlist(): boolean {
    return this.watchlist.has(this.movie.id);
  }

  toggle(): void {
    this.watchlist.toggle(this.movie);
  }
}

• standalone: true — no NgModules
• imports: [RouterLink] — the template links to /movies/:id
• @Input({ required: true }) — the parent (Home, Browse, Watchlist) passes the movie
• Constructor injection for WatchlistService
• A computed property and a method, both accessible from the template

Key terms

Term	What it means
@Component	The decorator that turns a class into an Angular component
selector	The custom HTML tag that embeds this component in other templates
Scoped styles	CSS that only applies inside the component’s own template
@Input()	Marks a property that a parent can set via [property] binding
@Output()	Marks an EventEmitter that a parent can listen to via (event) binding
EventEmitter	The object used to emit events from a child to a parent
ngOnInit	Lifecycle hook that fires after inputs are set — use for data fetching
ngOnDestroy	Lifecycle hook that fires before the component is removed — use for cleanup
standalone: true	Marks a component as self-contained with its own imports array

What is next

Module 03 — Templates and Data Binding →

Module 03 covers the full Angular template syntax: interpolation and property binding for rendering data, event binding for responding to user actions, [(ngModel)] for two-way binding, the @if and @for control flow for conditional and list rendering, and pipes for transforming display values.