Exploring Angular 4 on Github
I am currently working on a menu that is populated by a web service. The web service, taskService, is responsible for handling this feature, although it is not required at the moment.
ngOnInit() {
this.getTasks();
}
getTasks(): void {
this.taskService.getTasks()
.subscribe(Tasks => this.tasks = Tasks);
}
Upon clicking on a task within the menu, a separate component containing a form to update the data is loaded successfully through another web service. However, the issue arises when the updated task does not reflect in the task menu.
My import statement:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
As well as in the constructor:
private cdRef: ChangeDetectorRef
This is my attempt utilizing the detectChanges() function after updating the data with the save() function:
this.taskService.updateTask(task, id)
.subscribe(
this.Ref.detach();
setInterval(() => {
this.Ref.detectChanges();
}, 5000);
);
The following is the HTML code used to display the tasks within the menu:
<li *ngFor="let task of tasks" class="d-inline-block col-md-12">
<a routerLink="/task/{{task.id}}" > {{task.title}}</a>
<button class="close big" title="delete task"
(click)="delete(task)">x</button>
</li>
Additionally, here is the form utilized to update the task:
<form (ngSubmit)="save(taskName.value, taskBody.value)" #taskForm="ngForm" class="example-form">
<mat-form-field class="example-full-width">
<label>Task Name</label>
<input matInput [(ngModel)]="task.name" #taskName name="name">
</mat-form-field>
<mat-form-field class="example-full-width">
<textarea matInput [(ngModel)]="task.body" #taskBody name="body"></textarea>
</mat-form-field>
<button type="submit" class="btn btn-success" >Save</button>
</form>
These components are part of two distinct elements within the application.
In an effort to tackle this hurdle, I have looked into this tutorial, but remain unsure about effectively leveraging the ChangeDetectorRef.