Skip to content

Instantly share code, notes, and snippets.

@jhades
Last active December 26, 2021 08:03
Show Gist options
  • Save jhades/f2e97da5a4d977fabb0e7857b6420d10 to your computer and use it in GitHub Desktop.
Save jhades/f2e97da5a4d977fabb0e7857b6420d10 to your computer and use it in GitHub Desktop.
How to build Angular 2 apps using Observable Data Services - Pitfalls to avoid
addTodo(newTodo:Todo):Observable {
let obs = this.todoBackendService.saveTodo(newTodo);
obs.subscribe(
res => {
this._todos.next(this._todos.getValue().push(newTodo));
});
return obs;
}
let BehaviourSubject = new BehaviorSubject(initialState);
@Injectable()
export class TodoStore {
private _todos: BehaviorSubject<List<Todo>> = new BehaviorSubject(List([]));
public readonly todos: Observable<List<Todo>> = this._todos.asObservable();
constructor(private todoBackendService: TodoBackendService) {
this.loadInitialData();
}
...
}
let currentValue = behaviorSubject.getValue();
saveTodo(newTodo: Todo) : Observable> {
var headers = new Headers();
headers.append('Content-Type', 'application/json; charset=utf-8');
return this.http.post('/todo', JSON.stringify(newTodo.toJS()),{headers})
.pipe(
shareReplay()
);
}
export class App {
constructor(private todoStore: TodoStore,
private uiStateStore: UiStateStore) {
}
}
onAddTodo(description) {
this.todoStore.addTodo(newTodo)
.subscribe(
res => {},
err => {
this.uiStateStore.endBackendAction();
}
);
}
subject.next(newValue);
<ul id="todo-list">
<li *ngFor="let todo of todoStore.todos | async" >
...
</li>
</ul>
let subject = new Subject();
subject.subscribe(value => console.log('Received new subject value: '))
@clembu
Copy link

clembu commented Nov 12, 2016

What is this List<> type you use? It's not a typescript built-in type, and it's not in basarat/typescript-collections.
I want to assume it's just an alias for an array, but I don't really like assuming things.

@aqwert
Copy link

aqwert commented Nov 27, 2016

@FacelessPanda. I am going through this and it could be List from the immutable library. Typescript does not mind so far.
import { List } from 'immutable';

@rudyhadoux
Copy link

An Angular 7 update would be appreciated...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment