This is the component decorator. We know it's a decorator because it's preceeded by an "@" symbol. The properties and values inside of it are the metadata. All components must have a selector defined, as well as a template (which can be defined with "templateUrl" or inline html with "template").

The component decorator contains more properties which can be used, depending on the needs of the component.

export class AppComponent {
title = 'app works!';
}

And finally we have the class, which is exported. This means other modules (modules are simply files that import or export other members) can import this component by "import { MyAppComponent } from './path.to.component';"

Creating Components

You can choose to either create a component manually, or use the angular-cli to generate one for you.

If you create a component manually, you have to create the component file "mycomponentname.component.ts". Once you write the code for the component, it must be imported at the top of the app.module.ts file, and the exported class name of the component must be added to the declarations in the app.module.ts file.

If you use the angular-cli to generate a component, it will take care of several areas for you:

It will create a folder based on the component name you choose.

It will generate a .html file, a component file, a spec file for testing, and a .css file. It will also include the general coding structure associated with the component file.

It will import your component and add it to the declarations in the app.module.ts.