Join Ray Villalobos for an in-depth discussion in this video Creating a subcomponent, part of Learn AngularJS 2: The Basics.
- [Voiceover] When you're creating a more complex app,…it's a good idea to break up your…component into sub-components.…So let's take a look at how that works…by creating a simple sub-component…that's going to display the data for each artist.…So let me go to my app.html file.…And what I want to do is take this part…of the template right here,…and convert it into its own component.…So what I'm going to do is cut this out,…and then in here, I'm going to create a new component tag.…
I'm going to call this one artist-item.…And in order to pass information from this component…to that sub-component, I'm going to use property binding.…So I'll create a class, and this class is just…CSS that we're adding here.…But then I will add, or pass along,…an item called artist, and that's going to be…a property that's going to be passed along…to this sub-component.…
Let's go ahead and make this bigger.…And what we're going to pass to that…is each individual item.…So that is coming from our,…that's coming from this ng-for loop right here.…
In these tutorials, Ray Villalobos shows you how to start using AngularJS 2 in your own projects. He starts by defining what exactly Angular 2 is and how it differs from AngularJS 1. Then, once the basics are out of the way, he sets up the template that will drive the project and starts coding. Ray shows how to divide your project into modules, work with events, style content with CSS, and create components and subcomponents. Plus, find out how to change content dynamically using data pipes.
The template is included as a free download for all members.
- What is AngularJS 2?
- Setting up our template
- Creating a simple component
- Using multiple modules
- Displaying data in our templates
- Working with events
- Creating a subcomponent
- Filtering content through data pipes