[Fixed] How to show data when do you click button

Issue

When I input data in text input and then click button "Save Task" data will show is list in bottom descend. Now i console.log I want to show data when after click button. I don’t know how to get data show when after click button "Save Tasks" so I did console.log

app.html

          <div class="form-group" *ngIf="saveTask">
            <div class="form-row">
              <div class="form-group col-md-12">
                <label for="subjectTask" class="control-label">Subject Task</label>
                <input formControlName="subjectTask" type="text" class="form-control" id="subjectTask"
                  placeholder="Subject Task">
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-md-12">
                <label for="assignDev" class="control-label">Assign Dev</label>
                <select formControlName="assignTasks" name="assignTasks" class="form-control" id="assignTasks">
                  <option value="">choose dev...</option>
                  <option *ngFor="let staff of Staff" [ngValue]="staff.fullName">
                    {{staff.firstName}} {{staff.lastName}}
                  </option>
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-md-12">
                <label for="deadline" class="control-label">Deadline</label>
                <input formControlName="deadlineDate" type="number" class="form-control" id="deadlineDate"
                  placeholder="Deadline">
              </div>
            </div>
            <div class="form-row">
              <div class="form-group mr-5">
                <button type="button" class="btn btn-light btn-cancel">Cancel</button>
              </div>
              <div class="form-group">
                <button type="button" class="btn btn-success" (click)="onTasksSubmit()">Save Tasks</button>
              </div>
            </div>
          </div>

app.ts

  onTasksSubmit() {
    const subject = this.editTicket.controls.subjectTask.value
    const assignTasks = this.editTicket.controls.assignTasks.value
    const deadlineDate = this.editTicket.controls.deadlineDate.value
    this.newTask = {
      subject, assignTasks, deadlineDate
    }
    this.depositTasks.push(this.newTask)
    this.clearTask()
    console.log(this.newTask);
    // this.saveTask = false;
  }

  clearTask() {
    this.editTicket.patchValue({
      subjectTask: '',
      assignTasks: '',
      deadlineDate: ''
    })
  }


  saveTasks() {
    if (this.depositTasks.length != 0) {
      console.log('do');
      for (let i = 0; this.depositTasks.length > i; i++) {
        console.log(this.depositTasks);
        this.ticketService.setAddTasks(
          this.id,
          this.depositTasks[i]
        )
      }
    }
  }

Solution

<p *ngFor="let task of depositTasks">{{task?.subject}}</p>

try to use the depositTasks array in template as shown above.