Develop a modal dialog, style it via dedicated component properties, and establish two-way data binding with the passed data.
- [Instructor] Welcome back.…You successfully made it to our fourth section.…The previous section was all about learning…about Angular 2 templates, about negative directives…and how components can communicate with each other.…In this section, we will take the used case…of modal dialects for learning some new Angular 2 concepts.…So in our first video, we're going to allow the user…of our app to select a sensor…from a list via a modal dialect which we will create.…We will learn about how to style…our modal Angular component,…what viewing encapsulation means…and how we can benefit from it,…and also how to establish…a two way data binding using ngModel.…
Okay so we now have our sensor list…from our previous section and we would like…to allow our users to selectively adjust an item…to be visualized on a dashboard later.…As you can see, I've already added the section…for the conifer sensors below…and so whenever a user clicks on a button,…we are going to display a modal dialogue…where a user can then adjust the settings of the sensor…
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