Add Optional Properties in Angular to TypeScript Interfaces
Interfaces let us add strong typing to data, but also give us flexibility in the shape of our data by allowing optional properties. This especially comes in handy when computing additional properties on the frontend. In this video, we'll walk through adding an optional property to the habit interface and then computing that property in the habit list component.
Course
Angular Basics
After updating the habit-list.component.js component on line 29 to use an array.map to add that property to each habit, it'll adjust the existing items, but adding new habits no longer works. I've traced it back and forth and can't seem to find a solution. It gets all the way back to updating the Habits array in the Service, but it's as though the Observable no longer listens for changes, and all new habits are ignored. Your example code appears to have the same problem. I'm not just watching these in isolation, I'm making changes to my own code as I go, so a solution would be appreciated. Thanks.
Hey Scott, good catch. This is happening for the reason addressed in this lesson: https://egghead.io/lessons/angular-refetching-data-with-subjects-in-angular?pl=angular-basics-888f
That said, I can see how that would really throw you off, so I think I need to revisit this lesson and remove that distraction since it's irrelevant to what I'm trying to teach here. I'll post back when it's done.
Thanks for the speedy response! I did see the solution was provided later as a whole lesson, but yeah, I was expecting each thing to work at the end of each lesson. Which...for those lacking focus, can distract from the lesson at hand.
Thanks again. I'm enjoying the lessons!