Lesson 3 – Components

Components are the basic building blocks of an Angular 2 application. This is where we start actually building the application.

1. The Component object needs to be imported. That is done with an import command, like so:

import {Component} from “angular2/core”;

2. A component is defined with the @Component ({}) command. It’s called a “decorator”. There may be other decorators (I don’t know, yet).

3. A component has a selector directive, which is the name of the tag that you’re going to use in the HTML code. It tells Angular 2 where to put the stuff that it’s going to create.

4. In its most basic form, a component also includes a template which is the actual code to replace the selector contents with. In this video Bucky uses as string with HTML in it. There’s a better way which he talks about in a later video.

Something to note – the selector tags are not removed. Only their contents so they will stay in the resulting HTML code.

5. The components file has an export component which he talks about in more detail in a later video. The export class is public and can be included in other files.

6. As I mentioned in my introduction, the existing contents of the selector tags display until the application is loaded. This is useful for a “Loading” screen.

 

Leave a Reply

Your email address will not be published. Required fields are marked *