What are the key components of Angular?

Angular has the key components below,

1. Component: These are the basic building blocks of an Angular application to control HTML views.
2. Modules: An Angular module is a set of angular basic building blocks like components, directives, services etc. An application is divided into logical pieces and each piece of code is called as "module" which perform a single task.
3. Templates: These represent the views of an Angular application.
4. Services: Are used to create components which can be shared across the entire application.
5. Metadata: This can be used to add more data to an Angular class.

Practical Code Example

// Key Angular Building Blocks: Component, Template, Metadata, Service, Dependency Injection
import { Component, Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataService {
  getData() { return ['Angular', 'TypeScript', 'RxJS']; }
}

@Component({
  selector: 'app-demo',
  standalone: true,
  template: `<ul>@for (item of items; track item) { <li>{{ item }}</li> }</ul>`
})
export class DemoComponent {
  items = this.dataService.getData();
  constructor(private dataService: DataService) {}
}