title: Angular 5 - Remove a child component from parent view on user delete
body: <p>I have 2 component a Moment(post/thread) and a Comment, each moment can have multiple comments.</p>
  
  <p>Inside the moment-details.component i insert a moment-comment.component. The comment component shows all comments associate with the moment.</p>
  
  <p><strong>moments-detail.component.html</strong></p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;div id="moment"&gt;
  
  ...
  
              &lt;app-moment-comment [moment]="moment" [auth]="auth" [comment]="comment" class="comment" *ngFor="let comment of moment?.comments; let i=index"&gt;
              &lt;/app-moment-comment&gt;
  
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>moment-detail.component.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
      selector: 'app-moment-detail',
      templateUrl: './moment-detail.component.html',
      styleUrls: ['./moment-detail.component.scss']
  })
  export class MomentDetailComponent implements OnInit {
  
      moment: Moment;
  
      constructor(private router: Router,
          private route: ActivatedRoute,
          private momentService: MomentService,
          private authService: AuthService,
          private commentService: CommentService) { }
  
      ngOnInit() {
  
          this.route.params.switchMap((params) =&gt; {
              let moment_id = params['id'];
              return this.momentService.get(moment_id);
          }).subscribe((res) =&gt; {
              console.log(res);
              this.moment = res;
              this.user = res.author;
          });
  
          this.authService.getAuthenticatedUser().subscribe((res) =&gt; {
              this.auth = res;
          });
  
      }
  }
  </code></pre>
  
  <p>The moment-comment loops through all the comments and creates a new instance of the moment-comment component.</p>
  
  <p>Now within the moment-comment.component.ts a user can trigger a deletion of their comment. </p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
      selector: 'app-moment-comment',
      templateUrl: './moment-comment.component.html',
      styleUrls: ['./moment-comment.component.scss']
  })
  export class MomentCommentComponent implements OnInit {
  
      @Input() comment: Comment;
      @Input() auth: any;
      @Input() moment: any;
      showReply: any;
      reply: any;
      showReplies: boolean;
      inEdit = false;
      editComment: any;
  
      constructor(private commentService: CommentService) { }
  
  ...
      delete() {
  
          this.commentService.delete(this.moment._id, this.comment._id).subscribe((res) =&gt; {
              console.log(res);
          }, (err) =&gt; {
              console.log(err);
          });
  
      }
  ...
  }
  </code></pre>
  
  <p>Sure enough when delete() function is triggered by the user the backend updates my database to show the comment is removed from the moment. </p>
  
  <p>My question is, how can i reflect this change in frontend i.e the parent (moment-details) view?</p>