title: commenting and reply textbox for particular post
body: <p>I am designing commenting app in Angular. The bellow code is working fine: when I enter message in textbox and press enter key, it appends the value. However, my problem is that I want to provide one feature when user clicks on reply button of a comment. It should display particular child textbox. Currently when I click on reply button it display all li's textbox. <a href="https://i.stack.imgur.com/zMZUA.png" rel="nofollow noreferrer">in the image after click of any reply button it displays all child reply textbox but it should open particular comment box of particular comment</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class Module58Component implements OnInit {
    public replyBox = false;
    public txtcomment : string;
    heroes = ['first comment', 'second comment', 'third comment'];
    addHero(newHero: string) {
      if (newHero) {
        this.heroes.push(newHero);
        this.txtcomment = "";
      }
    }
  
    subComment(){
      this.replyBox = true;
      // alert('hello');
    }
  
    constructor() { 
      this.replyBox =false;
    }
  
    ngOnInit() {
       this.replyBox =false;
    }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.blog-comment::before,
  .blog-comment::after,
  .blog-comment-form::before,
  .blog-comment-form::after {
      content: "";
      display: table;
      clear: both;
  }
  
  .blog-comment {
      // padding-left: 15%;
      padding-right: 15%;
  }
  
  .blog-comment ul {
      list-style-type: none;
      padding: 0;
  }
  
  .blog-comment .post-comments {
      border: 1px solid #eee;
      margin-bottom: 20px;
      margin-left: 85px;
      margin-right: 0px;
      padding: 10px 20px;
      position: relative;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
      background: #fff;
      color: #6b6e80;
      position: relative;
  }
  
  .txtarea {
      border-radius: 4px !important;
  }
  
  .post-comments-text {
      margin-bottom: 20px;
      margin-left: 66px;
      margin-right: -18px;
      padding: 10px 20px;
      position: relative;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
      position: relative;
  }
  
  .blog-comment .meta {
      font-size: 13px;
      color: #aaaaaa;
      padding-bottom: 8px;
      margin-bottom: 10px !important;
      border-bottom: 1px solid #eee;
  }
  
  .blog-comment ul.comments ul {
      list-style-type: none;
      padding: 0;
      margin-left: 85px;
  }
  
  .blog-comment-form {
      padding-left: 15%;
      padding-right: 15%;
      padding-top: 40px;
  }
  
  .blog-comment h3,
  .blog-comment-form h3 {
      margin-bottom: 40px;
      font-size: 26px;
      line-height: 30px;
      font-weight: 800;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="blog-comment"&gt;
                  &lt;h6 class="text-success"&gt;Discussion Name&lt;/h6&gt;
                  &lt;hr/&gt;
                  &lt;div class="mainCommentTextbox"&gt;
                      &lt;div class="post-comments-text form-group"&gt;
                          &lt;textarea class="form-control txtarea" id="exampleTextarea" placeholder="Enter your comment here" rows="3" #newHero (keyup.enter)="addHero(newHero.value)" [(ngModel)]="txtcomment" (blur)="addHero(newHero.value); newHero.value='' "&gt;&lt;/textarea&gt;
                          &lt;!-- &lt;button class="float-right btn btn-primary" (click)=" addHero(newHero.value) "&gt;Comment&lt;/button&gt;  --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;ul class="comments" *ngFor="let hero of heroes; let i= index"&gt;
                      &lt;li class="clearfix" id={{i}}&gt;
                          &lt;div class="post-comments"&gt;
                              &lt;p class="meta"&gt;Amrut Jadhav &lt;a&gt;Dec 18, 2014&lt;/a&gt; : &lt;i class="pull-right"&gt;&lt;a (click)="subComment()"&gt;&lt;small&gt;Reply&lt;/small&gt;&lt;/a&gt;&lt;/i&gt;&lt;/p&gt;
                              &lt;p&gt;
                                  {{hero}}
                              &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;div class="" id=""&gt;
                          &lt;div class="post-comments-text form-group" *ngIf="replyBox"&gt;
                              &lt;textarea class="form-control txtarea" id="exampleTextarea" rows="3" #newHero (keyup.enter)="addHero(newHero.value)" [(ngModel)]="txtcomment" (blur)="addHero(newHero.value); newHero.value='' "&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>