How do we write Angular 2 components? In this video, we’ll get a first grasp of it.
- [Instructor] Hi and welcome…to the second video of this section.…In a previous video, we learned about…how to write an Angular 2 component.…In this video, we are going to extend…our neat little hello-angular component…and learn about how to pass in data from the outside…and in turn, also output data from the inside.…Okay, now that we have our Angular component running,…we'd like to pass in data from the outside.…In our case, we would like to pass in the name…of who our component should be greeting.…For this purpose, let's add a property who to our HTML tag.…
But before going ahead though,…we need to move our component a level deeper.…The reason for doing so is that currently…it is the root component of our Angular 2 app.…Unfortunately, Angular doesn't accept…any input values for root components right now.…Moving our component a level deeper…simply means to create a new component,…which is usually called AppComponent.…We can do that directly in our Bootstrap file…which is the main.ts file.…So we again use the @Component decorator,…
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