How to use pipes to filter data? And how to establish a data flow and communication between different components?
- [Juri] Welcome to the third and last video…of this section.…In the previous video we learned about HTML templates…and how to use built-in native angular directives.…In this video, we are going to implement…a filtering functionality with the help…of Angular 2 Pipes.…We are then learning on how to have independent components…talk together through events and template variables.…So again, we have here our sensor config component…which we created in our previous video.…And if you take a look at HTML code again,…we see that I have created a sensor list component here.…
But still, the data is passed in…from our sensor config component…and this is done through an input property…as we have learned previously.…This keeps the sensor list nicely reusable.…Now let's get to the meat of this video.…What we want is to be able…to filter our result list of sensors.…If you're familiar with Angular 1,…the filter construct may immediately come to your mind.…While that's actually not that wrong,…the only difference is that they are now called pipes…
Get up to speed with one of the most important building blocks of Angular 2: component-based directives, aka components. Components are reusable HTML widgets that replace the controller-based architecture in Angular. This course guides you through the various steps in migrating to Angular 2 and building real-world Angular components of your own.
Author Juri Strumpflohner starts by setting up a modern development environment with TypeScript and ES2015 support. Next, he explains what components are, how to build them, and how they differ from directives. He provides an opportunity to apply these new concepts while building a fictitious dashboard application for a home automation system.
Next, learn about HTML rendering templates, see how to establish a data flow between different components, and even find out how to integrate external libraries. Juri also shows how to make components production-ready and maintainable by applying automated unit and end-to-end testing techniques. As a bonus, discover how to bring your Angular 2 components to other environments such as the server side and mobile devices.
- Upgrading to Angular 2
- Feeding a component with data
- Building a foundation for your Angular app
- Building reusable models
- Comparing components and directives
- Integrating an external library
- Bundling and minification
- Maintaining components
- Testing and debugging Angular 2 components
- Building hybrid mobile apps with Angular 2 and Iconic 2