Demian Smith

В принципе, это можно решить при помощи BehaviorSubject:

export class MainComponent implements OnInit {
  public orderData$ = new BehaviourSubject<OrderViewModel[]>([]);

  ngOnInit() {
    this.orderService.getOrders().subscribe(r=>{
      this.orderData$.next(r);
    });
  }
}

<app-yamap [orderData$]="orderData$"></app-yamap>

Дальше идёт приблизительный код компонента YaMap. Я не знаю какая идея стоит за этим компонентом, но хочу показать как он может принимать и изменять данные переданного в него BehaviourSubject.

Контроллер карты:

export class YaMap implements OnInit {
  @Input() orderData$: BehaviourSubject<OrderViewModel[]>;

  public addOrder(newOrder: OrderViewModel) {
    this.orderData$.next([...this.orderData$.getValue(), newOrder]);
  }
}

Вью карты:

<order-map-element *ngFor="let order of orderData$ | async">
  {{ order.price }}
</order-map-element>
<button (click)="addOrder({price: 14.99})">Add another order</button>

В данном конкретном случае можно вполне обойтись и без BehaviourSubject и вы шли по верному пути с событием (placemarkSelection)="onPlacemarkSelected($event)" (если я правильно вижу ход мысли). Идея в том чтоб компонент app-yamap просто отображал данные [orderData], но не менял их самостоятельно. Данные должны меняться извне по событию от компонента.

Почему лучше постараться обойтись без использования BehaviourSubject? Он усложняет код, делая компонент  менее пригодным для переиспользования. Вот замечательный пост Дена Абрамова об "умных" и "тупых" компонентах https://medium.com/@dan_abramov/smart-and-dumb-com... Эта идея применима ко всем компонентным подходам, не только к Реакту. Старайтесь делать как можно больше тупых компонентов и будете чаще кайфовать от гибкости и расширяемости собственного кода.

Проблема в том, что если разделять скрипты &&, то npm будет ждать пока завершится предыдущий скрипт перед тем как запустить следующий. Но суть ng в том, что он не завершается автоматически.

Для того чтоб запустить cкрипты параллельно, используйте одинарный &:
ng s & json-server --watch db.json --port 3000

<form [formGroup]="myForm" (ngSubmit)="saveFrom(statsForm.value)">
 <table class="table table-responsive">
  <thead>
   <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
    <th>Col 5</th>
    <th></th>
   </tr>
 </thead>
 <tbody formArrayName="itemRows">
    <tr *ngFor="let row of [1, 2, 3, 4, 5]" app-data-table-row [row]="row"></tr>
  </tbody>
  </table>
</form>

@Component({
  selector: '[app-data-table-row]',
  template: `
  <td>Hello, World!</td>
  <td>Hello, World!</td>
  <td>Hello, World!</td>
  <td>Hello, World!</td>
  <td>Hello, World!</td>
  <td>Hello, World!</td>
`
})
export class AppDataTableRow {
  @Input('row') row;
}

У класса CategoryComponent отсутствуют аннотации и ангуляр невдупляет что в конструктор передавать.

сделайте так:

export class CategoryComponent {...}
CategoryComponent.$inject = ['$http', '$scope', 'socket'];

Но вообще чтоб с каждым классом и функцией так не мучаться, люди юзают автоматические аннотаторы типа такого: https://github.com/olov/ng-annotate#tools-support

target - это тот компонент, который породил событие "клик". Если вам нужно знать какой компонент его поймал, то юзайте event.currentTarget. В вашем случае это будет строка.

Но в любом случае код выглядит так, будто его писал человек, одержимый бесом jQuery.

Вот так бы выглядел код, если бы его писал нерадивый angular программист, забывший про jQuery навсегда:
(в любом случае это лучше, чем пример в тексте вопроса, так как он не нуждается в каких-то дополнительных выкрутасах в контроллере и изменения дома не будут неожиданно потеряны в случае перерисовки компонента самим ангуляром по событию, не зависящиму от вас)

<tbody>
  <ng-container *ngFor="let course of coursesList">
    <tr  (click)="course.isOpened != course.isOpened">
          <td>{{course.Number}}</td>
          <td>{{course.name}}</td>
          <td>{{course.Start | date: "dd.MM.yy"}}</td>
          <td>{{course.Finish | date: "dd.MM.yy"}}</td>
    </tr>
    <tr *ngIf="course.isOpened">
       <td colspan="4">Here we go</td>
    </tr>
  </ng-container>
</tbody>

Нерадивый, потому что тут мутируется объект курса, что не есть хорошо.