retrieveListFromDataBasein which we will perform GET method.
urlpart is also needed here and we subscribed response of this call. Also we added
<TodoItem>part which is telling that our response will have type
Observable. We will use this soon and explain in more detail as we go along, so for now we can focus on understanding and interacting with HTTP calls. If you're interested, you may watch a video about this topic to get a sneak peek.
Observable- Angular has built in handling of reacting to streams of data. We need to
subscribeto the response and define how we react to it.
Subjectcomes into play.
Subjectas a property of the service class:
Subject's mechanism of emitting the next value, we can announce the response we got from the server:
Observableto the rescue! Instead of sending back a static list of items, we return an
Observableof the list to the component by converting the
Observable. (when using localhost you used a property which was mutable, the array. each time you pushed a todo list item into the array, it mutated and that's why you saw the update in the view immediately)
list-manager.component.tsyou need to change
Observable<TodoItem>because the server now returns an
TodoItem. Since Observables are also described as streams of data, and streams are asynchronous data, we need to also change our template that displays our items. To display values from
Observable, we use the
*ngIfdirective to display values only when we have something in
todoList. Then we added
asyncpipe by putting
pipein Angular) which marks the data as asynchronous and allows Angular to handle it correctly. We also used
as todoItemsto refer to the array inside the Observable by the name 'todoItems'.
subscribe()we define how to react to the response. We define what happens when the call was successful, what happens if there's an error, and what happens when the call completes. In the code above, we added logic to call the method to retrieve the data from the server if the call is successful.