To recap everything we've learned so far, I want to look closely at this todo list component that we built. This component is a bunch of other pieces all working together and fit together into one file. It's two pipes, it's another component used as a child component. It's directives that are automatically included. It's a couple of inputs and it's an injected service.
The main key to working with Angular 2 and understanding how to use it is understanding how to bring things in from other files. If you have some data that needs to come into your component, you use inputs.
If you have data that needs to be shared between or that'll make requests or things like that, and they're injected through services and providers. If you have components that you need to use, you import them, and then drop them in your directives, and then simply list them. Or pipes for filtering or other types of manipulation, you just include them in the pipes.
All those things working together, pipes, directives, inputs, services, then the bundled directives that Angular includes allows you to write these really nice templates to describe what's going on.
We know that we're looping through some todos in a todo service. We know that we're going to check on the status, whether it's completed. We know that we're going to search on a term. We know that we have some sort of rendering component that's going to take an input of the todo that it comes through and that this component's going to send out a toggle event that we can forward on to the todo service.
We didn't really write a lot of logic in here as much as we just wired pieces together.
As for what's next, I want to focus on this todo.toggle to really drive a point home. That's, this toggle method is basically mutating a property on my todo model. Mutating a property just means changing it to something else.
We didn't run into any bugs with this, but Angular 2 is going to encourage, for performance reasons, and for best practices and patterns, that you avoid mutating properties. That instead, you assign new instances each time something updates, basically like what we did here.
Instead of todo.toggle, what you'd do is you'd grab that todo and use object assign. Where you start with a new object, you say, take the current todo that we have that's working and then update or assign these properties that have changed.
We want to change status on this, and we want the status to be based on whatever the todo.status currently is. If the todo status is started, we want it to be completed, otherwise we'll keep it as started, and we'll just call this status.
We don't need to pass in this value, because if a value and a key have the same name, you can just pass in the key and it'll look up the value of this status and just assign it to the key of status.
Then object assign returns a new todo, call it toggle todo, which we can pass in right here. It can go through and toggle and everything works just fine and we can add new things, toggle them, and everything is working great.
Now, the reason I bring this up is because object assign might be new to you, the spread operator might be new to you, the imports might be new to you. There's a ton of new things and concepts and immutability and other ideas that Angular 2 has adopted.
These are the best practices that people have found to improve performance and stability, avoiding bugs and testability and all these sorts of things, that in the end will improve your development experience.