Similar to events in AngularJS2?

Question

JavaScript

There is a simple comment component:

import {Component, Input, OnInit} from 'angular2/core';

export class Comment {
  id: number;
  text: string;
  comments: Comment[];
}

@Component({
  selector: 'comment',
  template: `
    <div>
      #{{comment.id}} - {{comment.text}}
      <p (click)="commenting = !commenting">Ответить</p>
      <textarea *ngIf="commenting"></textarea>
      <div class='coms' *ngFor="#com of comment.comments">
        <comment [cmnt]="com"></comment>
      </div>   
    </div>
  `, directives: [CommentsComponent],
  styles: [`.coms {margin-left: 20px} p {margin: 0} textarea {width: 600px; max-width: 100%}`]
})
export class CommentsComponent {
  @Input() cmnt: Comment
  comment: Comment;  
  commenting: boolean;

  ngOnInit() {
    this
    this.commenting = true;
    if (this.cmnt) this.comment = 
      this.cmnt;
    else
    this.comment = <Comment>{ id: 1, text: 'Text', comments: [{ id: 2, text: 'Txt2', comments: [{ id: 2, text: 'Txt2' }, { id: 3, text: 'Txt3' }] }, { id: 3, text: 'Txt3', comments: [{ id: 2, text: 'Txt2' }, { id: 3, text: 'Txt3' }] }] };
  }
}

Which results in the following page:

How do I make the "Reply" button hide the textarea in the rest of the comments?

Answer 1

On click, save the id of the active comment, and put a check in all components "if there is an active id and it does not match mine, then hide"