FE Lecture 9 Home Work

[volodymyr-logvinov]

Полезные ссылки: https://angular.io/guide/cheatsheet https://angular.io/guide/component-interaction

уровень нормальный: Задача сгенирировать angular проект используя angular-cli и реализовать отображение todo-list'а в angular таски со статусом DECLINED должны быть скрыты. По клику менять статус по цепочке WAITING -> IN_THE_PROCESS -> COMPLETED

уровень усложненный компонента представления должна генерировать события типа: смена статуса, добавление в избранное, отмена (установка статуса DECLINE отдельной кнопкой) для реализации этого понадобиться декоратор Output пример ниже

Дизайн полностью на ваше усмотрение.

 const tasks = [
    {
      id: 17,
      state: 'COMPLETED',
      description: 'Learn es-6',
      favorite: true,
      dueDate: 1514757600000
    },
    {
      id: 18,
      state: 'IN_THE_PROCESS',
      description: 'Learn typescript',
      favorite: false,
      dueDate: 1514757600000
    },
    {
      id: 19,
      state: 'WAITING',
      description: 'Learn redux',
      favorite: false
    },
    {
      id: 20,
      state: 'DECLINED',
      description: 'Learn Japanese',
      favorite: false
    },
    {
      id: 21,
      state: 'IN_THE_PROCESS',
      description: 'Learn angular',
      favorite: true,
      dueDate: 1519855200000
    }
  ];

Пример использования Output:

export class InternalComponent {
  @Output() action = new EventEmitter();
/// action у нас будет сущностью типа EventEmitter, который в свою очередь наследуется от Subject из rx.js

  constructor() {
    this.action.emit({type: 'STATUS_CHANGED', data: 42});
  }

outer-component.html
<internal-component (action)="handleAction($event)"></internal-component>
// мы устанавливаем метод handleAction как обработчик события произошедшего во внутренней компоненте

outer-component.ts
export class OuterComponent {
  ...
  handleAction(event) {
    console.log(event);
    // event === {type: 'STATUS_CHANGED', data: 42}
  }
  ...
}