Components explained

- [Instructor] Angular2 applications are comprised of components. And you could think of it as like objects in an application. One object could be made up of many other objects. That's how I like to think of components also. But components ultimately render to become views on a website. Think of components as being a view made up of templates, which also have classes which are made up of properties and methods, in addition to metadeta, which are defined by decorators.

So, simply said, they are parts of your website. And they can be made up of smaller components. Visually, you can look at it like this: If this whole box was a view, there's a template associated with it, there will be a class, which contains properties and methods, in addition to metadeta, which dictates how that view should be displayed. All right, in this slide here, we have a simple component. And we're going to start from the bottom going up, because oftentimes it's easier to write the classes first and then ultimately add the import statements as the last step.

So, starting from line seven through nine, we have our class that has one property, a welcome message, and that's simply going to be assigned the value of "Welcome to my 1st .NET Angular 2 project!!!" Now, right above it, we have our component. And our component is comprised of a selector and template. The selector is going to be used for the name of the component, which is going to be my app. And the template has the html that we're going to display, and it references our class property welcome message.

So that is on line three through six. On line one, we have our import statement, and that simply allows angular to use the component feature reference from its core library. So ultimately what this does is convert our page to display from "Let's do this," to "Welcome to My 1st .NET Angular 2 project," which you can see at the very bottom.