@Component({
  selector: 'app-comment',
  templateUrl: './comment.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['./comment.component.css']
})

export class CommentComponent implements OnInit {
  @Input() comments: Comment[];
  @Input() users: User[];
  comment: Comment;

  constructor(private commentService: CommentService, private alertify: AlertifyService, private router: Router ) {
   }

  ngOnInit() {
    this.comment = {
      id: 0,
      userId: 0,
      ticketId: 0,
      content: ''
    };
    console.log(this.comments);
    console.log(this.users);
  }

  selectUser(id: number): User {
    return this.users.find(user => user.id === id);
  }

  addComment() {
    this.commentService.addComment(this.comment).subscribe((data: Comment) => {

      this.alertify.success('Comment has been added');
      this.comments.push(data);
      //console.log(data);
      //this.router.navigate['tickets/' + data.ticketId]
      //location.reload();

    }, error => {
      this.alertify.error(error);
    });
  }

}


<form class="mb-2" #addCommentForm="ngForm" (ngSubmit)="addComment()">
    <textarea class="form-control form-control-sm" type="text" placeholder="Type some comment!" name="content" [(ngModel)]="comment.content"></textarea>
    <button type="submit" class="btn btn-success btn-sm offset-sm-10 col-sm-2">Add</button>
</form>

<div *ngFor="let comment of comments | reverse" class="card mb-2">
  <div class="card-body pb-1">
    <h6 class="card-subtitle mb-2"><a [routerLink]="['/members/', comment.userId]">{{selectUser(comment.userId).username}}</a></h6>
    <h6 class="card-subtitle mb-2 text-muted">{{comment.dateCreated | date: 'd MMMM yyyy HH:mm'}}</h6>
    <p class="card-text mb-1">{{comment.content}}</p>
    <a href="#" class="card-link mb-1 text-danger">Delete</a>
  </div>
</div>