Đầu tiên, khi làm việc với Angular, chúng ta cần tạo ra các component để hiển thị dữ liệu. Ví dụ, chúng ta muốn có hai component là Author List Component (danh sách tác giả) và Author Detail Component (chi tiết tác giả). Để tạo chúng, chúng ta có thể sử dụng lệnh sau:

ng generate component author-list
ng generate component author-detail

Author List Component sẽ hiển thị một danh sách các tác giả và truyền thông tin từng tác giả cho Author Detail để hiển thị chi tiết.

Trong Author List Component, chúng ta sẽ có một danh sách các tác giả và sử dụng directive *ngFor để truyền từng tác giả vào Author Detail để hiển thị thông tin:

@Component({
  selector: "app-author-list",
  template: `<app-author-detail
    *ngFor="let author of authors"
    [author]="author"
  ></app-author-detail>`,
  styles: [``],
})
export class AuthorListComponent implements OnInit {
  authors = authors; // danh sách tác giả
  constructor() {}
  ngOnInit() {}
}

Trong Author Detail Component, chúng ta hiển thị thông tin của mỗi tác giả và có một nút xóa để xóa tác giả đó. Tuy nhiên, việc xóa trực tiếp trong component này không được khuyến nghị, thay vào đó chúng ta có thể gửi một sự kiện tới component cha thông qua EventEmitter và @Output decorator.

export class AuthorDetailComponent implements OnInit {
  @Input() author: Author; // thông tin tác giả
  @Output() deleteAuthor = new EventEmitter<Author>(); // event xóa tác giả

  constructor() {}
  ngOnInit() {}

  handleDelete() {
    this.deleteAuthor.emit(this.author); // gửi sự kiện xóa tác giả tới component cha
  }
}

Tại đây, chúng ta sử dụng EventEmitter để gửi một sự kiện xóa tác giả về component cha. Trong component cha (Author List Component), chúng ta có thể lắng nghe và xử lý sự kiện này.

@Component({
  selector: "app-author-list",
  template: `<app-author-detail
    *ngFor="let author of authors"
    [author]="author"
    (deleteAuthor)="handleDelete($event)"
  >
  </app-author-detail>`,
  styles: [``],
})
export class AuthorListComponent implements OnInit {
  authors = authors; // danh sách tác giả
  constructor() {}
  ngOnInit() {}

  handleDelete(author: Author) {
    this.authors = this.authors.filter((item) => item.id !== author.id); // xóa tác giả khỏi danh sách
  }
}

Như vậy, thông qua việc sử dụng EventEmitter và @Output decorator, chúng ta có thể gửi sự kiện từ component con lên component cha để xử lý các thao tác như xóa tác giả một cách linh hoạt và dễ dàng.