Share Data and Business Logic Throughout an Angular Application with Services

Angular

Share this video with your friends

Right now, the collection of habits and the business logic for adding a habit are in the component. This works fine for how small our app is right now, but what if we need to access the collection of habits in another component? Or what if we need to add a habit somewhere else? We'd either have to duplicate code or come up with convoluted ways of passing data through inputs and outputs. This is what services are for in Angular. Services let us store data and logic in a class that we can reuse anywhere in our application.

rubenfrancogarcia

~ 3 years ago

sorry, Can't delete the first comment. But on line 12 on habit-list-component.ts file at the of keyword. I get the following error: Type 'Observable<any> | undefined' is not assignable to type 'NgIterable<any> | null | undefined'

rubenfrancogarcia

~ 3 years ago

nvm, the async pipe solved it. My complier yells at me before that point so stopped the video, and I tried to fix it at that point.

Sam Julien(instructor)

~ 3 years ago

Glad you got it sorted!

Alfonso Rush

~ 10 months ago

App breaks at this point.

Compiled with problems:
×
ERROR
src/app/habit-list/habit-list.component.ts:20:3 - error TS2564: Property 'habits' has no initializer and is not definitely assigned in the constructor.

20   habits: Observable<any>;
     ~~~~~~
ERROR
src/app/habit-list/habit-list.component.ts:28:14 - error TS7006: Parameter 'newHabit' implicitly has an 'any' type.

28   onAddHabit(newHabit) {
                ~~~~~~~~
ERROR
src/app/habit.service.ts:33:12 - error TS7006: Parameter 'newHabit' implicitly has an 'any' type.

33   addHabit(newHabit) {
              ~~~~~~~~