Currently, our modal dialog solution is not reusable for different use cases. We will solve this problem in this video.
- [Juri] Welcome to the video…on Making the Modal Generally Reusable.…In a previous video, we learned about new angular concepts…by creating a modal dialog window.…In this video, we are going to further work on our new modal…by improving it and by making it generally reusable…across our project.…By doing so, we will learn about a new concept of…content projection and finally also how to…add key binding support to our modal dialog window.…So when we talk about a reusable modal dialog component,…we think about a component which can display…whatever content we provide within a modal dialog window.…
In our current implementation, the modal is tightly coupled…to visualizing the data of our sensor object.…So as you can see, we have a title area there…and we have a content area there.…What we want to have is to move that part outside…where we actually use our modal.…So let's switch back to the sensor config html template…and within the html tech where we instantiate our modal…we simply paste in the title area of our modal dialog.…
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