Join Ray Villalobos for an in-depth discussion in this video Displaying data in our templates, part of Learn AngularJS 2: The Basics.
- [Voiceover] Templates are going to become…a lot more powerful…when they are connected to our components.…Now, the simplest way to tie…a template to a component,…is through something called interpolation.…Use double curly braces to bind…a property from your component class…into your template.…So, let me show you how to do that.…It's pretty easy.…All we need to do is create a variable right here.…So, I'm going to say, name,…and set it to something like my name, here.…And then, I'm going to save this.…That's going to become a property of this component.…
And in our template, we can simply…modify this HTML here…to show our name.…So, we'll just put in a colon here,…and, in double curly braces,…we will type in our variable name,…or our property, called "name."…Let's go ahead and save that.…And you can see that it picks up my name,…and what it's doing is interpolating…whatever is in here.…This is an expression.…So, this expression gets interpolated…by going to the component…and reading the value of my variable,…or my property.…
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