Learn about the difference between components and directives.
- [Juri] Hi.…In our previous video, we refactored our modal dialog…so that it becomes generally reusable.…In this video, we are going to learn…about attribute directives or directives in general.…Finally, we're also encountering @HostListener,…a quite useful decorator,…which we're gonna need when building directives.…Now our modal dialog is already nicely reusable,…but for the purpose of learning some new concepts,…we're going to implement an extension…that allows us to launch our modal dialog…in a fully declarative way.…What we would like to have is to attach an attribute…to our button, and specify the instance of our dialog,…which we would like to open.…
So what I did already…is to move our modal dialog declaration…from the sensor configuration component…inside the sensor list.…This makes things a bit easier here,…so again as you see, we have that click implemented up here…where we associate the current item…to a local sensor modal variable…which is then used in our modal.…And here we would like to use a directive…
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