Angular – Creating and Using Components

In this Angular tutorial post, we will discuss how to create and use components. 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.

creating and using components

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

creating and using components

  • 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.

creating and using components

  • 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.  

creating and using components

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

creating and using components

  • 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].

creating and using components

creating and using components

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.

  • 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.

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

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.

creating and using components

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

creating and using components

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

creating and using components

Creating and using components is really easy, right? On the next section, we will discuss Directives.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.