angular 4.. Array Push is not updating view instantly

Question

I am using angular 4. Below is the problem.

I have one div inside that one span and one textbox. Whenever i enter something in the textbox and press enter. it has to create dynamically one span in the div and the size of the textbox has to be changed remining size. Below is the code which i have written in angular 4. The below code is not working because whenever i do array push it's not getting reflecting immediately. Please help me.

HTML CODE::

<div>
      <div id="searchBar" class="input-form">
        <label class="label-form">people In Topic</label>
        <div id="topicPeople" #topicPeopleSelcted style="border-bottom: 1px #e6e6e6;padding:0px;">
            <span style="padding:0px;">
                <span *ngFor="let person of topicPeoples" style="background-color: #e6e6e6;font-color:black;"> {{ person.name }}</span>
            </span>
            <textarea  (keydown.enter)="$event.preventDefault()" [style.width.px]="topicPeopleTextBoxWidth+'px'" rows="1" id="topicPeopleTextBox" formControlName="topicPeople"
                       style="border:none;" (keyup)="topicPeoplechange($event,topicPeopleHash.value)" #topicPeopleHash value="{{topicPeople}}"
                       spellcheck="false" autocomplete="false" autocapitalize="off" autocorrect="off" tabindex="1" dir="ltr" aria-autocomplete="list"></textarea>
        </div>
      </div>
    </div>

Type script code::

  import {
  ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnInit, SimpleChanges,
  ViewChild
} from '@angular/core';
import {FormBuilder, Validators} from "@angular/forms";

@Component({
  templateUrl: './saveTopic.component.html',
  changeDetection : ChangeDetectionStrategy.OnPush,
  styleUrls: ['./../group/saveGroup.component.css','./../group/group.component.css']
})
export class SaveTopicComponent  implements OnInit{

  saveTopicForm : any;

  @Input() topicPeopleTextBoxWidth : number;

  peopleNoOfRows : number = 1;

  @ViewChild('topicPeopleSelcted') topicPeopleSelectedView: ElementRef;

  @Input() topicPeoples :   Array<Object>;

  constructor(private formBuilder: FormBuilder,private ref : ChangeDetectorRef) {
    this.topicPeoples = new Array();
    this.saveTopicForm = this.formBuilder.group({
      'topicName': ['', Validators.required],
      'topicDescription': ['', Validators.required],
      'topicPeople' : ['']
    });

   setInterval(() => {
        console.log("Testing");
        this.ref.markForCheck();
    },500)
  }
  ngOnInit() {
      this.topicPeopleTextBoxWidth = 420;
  }

  topicPeoplechange(event,inputValue) {
    if(event.keyCode == 13) {
      this.topicPeoples.push({
        "name": inputValue
      });
      console.log(this.topicPeopleSelectedView.nativeElement.offsetWidth);
      let childrens = this.topicPeopleSelectedView.nativeElement.children;
      let peopleDiv = childrens[0];
      let textBoxDiv =childrens[1];
      let peopleSpan = peopleDiv.children;
      let totalSpanWidth = 0;
      for (var _i = 0; _i < peopleSpan.length; _i++) {
        totalSpanWidth = totalSpanWidth + peopleSpan[_i].offsetWidth;
      }
      console.log(this.topicPeopleTextBoxWidth);
      console.log(totalSpanWidth);
      if(420 - totalSpanWidth > 0) {
          this.topicPeopleTextBoxWidth = 420 - totalSpanWidth;
      }
      console.log(this.topicPeopleTextBoxWidth);

    }
  }


  deepClone(oldArray: any[]) {
    let newArray: any = [];
    oldArray.forEach((item) => {
      newArray.push(item);
    });
    return newArray;
  }

}