There are two ways to create Components: either create it manually or via Angular-CLI.
Let us try creating it manually. In your file explorer under the src/app folder, create a new file.

1

– Go to src/app and then right click
– Click the New File and you’ll be asked for a filename

2

– Basic format of naming a file is “[myComponentName].[fileType].ts” and in this case I named it ‘stocks’

Open the newly created file and we’ll make a very basic component class.

3

– Referring to the image above, first we need to import {Component} from angular/core.
– Next we added a Component Decorator with the selector ‘stock’ and template of showing ‘Stocks’ in           Header1 form
– A selector is a CSS selector which maps the component to our front-end
– Last is the export class where we leave it blank for now.

Now you have manually created a component!
Next, we will create another using the angular-cli. First, let’s open our integrated terminal.

4

– Go to View>Integrated Terminal
– Or use the shortcut key combination shown

5

– You can see that it appears right below the workspace of our IDE.
– Note that we are using the Visual Studio IDE and from now on, we will use its integrated terminal while    using the Angular-CLI commands.
– Type the command ng g component [componentName].

6

7

Congratulations! You’ve successfully created a Component manually and via Angular-CLI. Now we’ll learn how to use them.
First thing we need to do is import the Stocks Component from ‘./stocks.component’. To do that, open the app.component.ts in the file explorer and type the code.

8

– Note that ‘stocks.component.ts’ is in the same folder as our ‘app.component.ts’ file
– Whenever we do an import, we don’t need to add the ‘.ts’ file extension.

Next, open the app.component.html file put our manually created selector stocks.

9

What it does is it shows the template we defined last time which is Stocks.

10

Now let’s head back to our file explorer and open our app.module.ts. Same as we did in the app component, import our Stocks Component to the app.module.ts file and declare it inside the @NgModule decorator.

11

Save your work and it’s ready to be run. Open your integrated terminal and type ng serve.

12

Go back to your browser on port localhost:4200. The word “Stocks” should appear.

13

On the next article, we will be discussing Creating and Using Directives.

 

JOIN THE ANGULAR ACADEMY!
$100,000 is the average annual salary of talented software developers and your chances of getting this salary get better by learning Angular 2 today!

Sign up now and make the first step towards upgrading your skill set.

PLUS: Get up to 75% OFF our Angular 2 course in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.