Gion Kunz
Let's create together.
by Gion Kunz
Founder, UI Developer, UX Enthusiast at syncrea GmbH
Client
Server
update todo
update todo
reload data
show updates
Delayed Feedback
Client
Server
update todo
update todo
reload data
immediate feedback
refresh state
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class TodoService {
todos = new BehaviorSubject<Todos[]>([]);
constructor(private http: HttpClient) {
this.loadTodos();
}
loadTodos() {
this.http
.get<Todos[]>('http://localhost/api/todos')
.subscribe(todos => this.todos.next(todos));
}
}
addTodo(title: string) {
this.todos.next([{
title,
done: false,
order: 1
}, ...this.todos.getValue()]);
this.http.post('http://localhost/api/todos', {
title,
done: false,
order: 1
})
.subscribe((todos) => this.todos.next(todos));
}
Optimistic Update
Server Sync
By Gion Kunz
Learn the basics and intermediate topics of Angular within our two-day Angular workshop.