Learn how to best integrate external, third-party libraries and make them work with Angular 2.
- [Instructor] Hi and welcome back…to Video Two of the Section.…In our previous video,…we developed a fantastic tab component…embedded in a widget container.…Now we're going to use it.…In this video, we will mainly focus on external libraries,…with Angular 2 components,…specifically the famous D3 visualization library,…and through this process we will again encounter…a couple of interesting Angular 2 component features.…Now, first of all,…I have created already a nice looking…humidity sensor component here as you can see.…The component internally uses our tab component.…
It visualizes the temperature in the first tab…and in the second tab,…I'd like to show a visualization of our humidity.…And for that purpose, we will use D3.…Now, D3's library that allows you to manipulate the dom…based on the data…and as it is ideal for creating enriched data visualizations…we will actually build something fairly easy,…namely a donut chart…for visualizing the humidity percentage.…Now to import D3, we again simply use npm…and save it to our package of json.…
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