CodeSnooker

clone():Goal {
  return new Goal({
    title: this.title + ' (clone)', 
    tasks: this.tasks.clone(), 
    archived: this.archived
  });
}

CodeSnooker

export class EditorComponent implements OnInit, OnChanges, DoCheck {
    ngDoCheck() {
       this.reBuildTasks();
    }
}

CodeSnooker

export class GoalComponent implements OnChanges, DoCheck {
    ngDoCheck() {
        this.reComputeTasks();
    }
}

CodeSnooker

export class GoalComponent implements OnChanges {
  ....
  ...
  ...
  
  ngOnChanges() {
    this.reComputeTasks();
  }

  private reComputeTasks() {

CodeSnooker

export class EditorComponent implements OnInit, OnChanges {

  ngOnInit() {
    this.reBuildTasks();
  }

  ngOnChanges() {
    this.reBuildTasks();
  }
  

CodeSnooker

<div class="goals" sd-layout="row" sd-layout-wrap dnd-sortable-container 
     [dropZones]="['boxers-zone']" [sortableData]="_listGoals">
  <goal [goalItem]="goalItem" *ngFor="let goalItem of _listGoals; let i = index" 
        dnd-sortable [sortableIndex]="i" (click)="editGoal($event, goalItem)">
  </goal>
</div>

CodeSnooker

@Input ('title') title: string;
@Input ('goalItem') goalItem: Goal;
private completedTasks:TaskCollection;
private inCompletedTasks:TaskCollection;

CodeSnooker

<div class="goal-body">
  
  <!-- Pending Tasks -->
  <div class="task" *ngFor="let taskItem of inCompletedTasks; let i = index" sd-layout="row">
    <md-checkbox class="task-checkbox" color="warn" [checked]="taskItem.completed" 
                 (change)="itemClicked($event, taskItem)"></md-checkbox>
    <span class="description">{{taskItem.title | sdtruncate : 60 }}</span>
  </div>
  
  <!-- Completed Tasks -->

CodeSnooker

<!-- Progress bar -->
<md-progress-bar value="{{goalItem?.progress}}" color="warn">
</md-progress-bar>

CodeSnooker

triggerHideOverlayEvent() {
  var editorLayout = document.getElementById('goalEditor');
  editorLayout.style.opacity = '0';
  editorLayout.style.zIndex = '-100';
  setTimeout(function() {
    editorLayout.hidden = true;
  }, 600);
}