How to create a new component in Angular 2

In this tutorial, which is meant for beginners, I’m gonna teach you the fundamentals of Angular 2, and in particular how to create a new component, the first thing when learning this framework.

The JavaScript programming language

These are the prerequisites: if you haven’t done before, go ahead and install Node.js https://nodejs.org from the main website, bundled with it you will find NPM, which is node package manager, you’re gonna need it. Then check if the installation was correct:

$ node -v
$ npm -v

You’re gonna also need Python https://www.python.org installed on your system, in order to install the Angular CLI. To check if you have installed it, go to your shell and issue the following command:

$ python --version

Now if everything is correct you can install the Angular CLI and create a new project with the following commands at your shell:

$ npm install –g angular-cli
$ ng -v
$ ng new angular-tutorial

These commands will install globally the Angular CLI and create a new project, to see it working switch directory to your project folder and launch the server:

$ cd angular-tutorial
$ ng serve

Go to your browser at following location and you should see that the app you have just created is working correcly:

http://localhost:4200

Now the fun part with Angular 2, but before that, I advice you to install Visual Studio Code, since it has the best support for Typescript, the preferred language in writing an Angular 2 application. If you prefer Atom, it should also be fine.

Then, go to your project folder, switch to src, and again to app. You will find the default component and module of the application, let’s play with them. Go on and create a new component called demo.component.ts with the following code inside it:

import { Component } from '@angular/core';

@Component({
  selector: 'demo-component',
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  message = 'This is the demo component.';
}

The next thing is to create a template in the same directory, in wich you will show the message variable passed by the component, create a new file called demo.componet.html, with the following content:

<h2>
  {{message}}
</h2>

Then, you’re gonna have to modify app.module.ts to include the new component, it will look like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { DemoComponent } from './demo.component';

@NgModule({
  declarations: [
    AppComponent, DemoComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent, DemoComponent]
})
export class AppModule { }

Last thing, add the following line to index.html inside your src folder under your project folder, put it after the app-root tag. Refresh your browser and you should see the demo component message:

<demo-component>Loading...</demo-component>

We just created a new indipendent component in Angular 2, you can also choose to create a component inside another, depending on the easiness of making different components talk to each other.

To create a child component simply create another component and another template, this time, called child.component.ts and child.component.html, import that component and add it to the declarations in app.module.ts, but you don’t have to bootsrap this component since it’s inside another one.

Lastly add a tag inside app.component.html matching the selector of your child component, something like:

<child-component>Loading Child...</child-component>

If you ever needed to see the full code, go to my GitHub and take a look at it: https://github.com/mirkobenedetti/angular-tutorial.

You can also use the CLI to generate a component, among other things, but you’ve learnt to do that manually, it’s much more fun.

That’s all for the beginning, I hope you’ve enjoyed this tutorial, if you have any questions do not hesitate to contact me in person.

Did you like this post? Please, share it on your preferred social networks or comment here below, thank you!

2 thoughts on “How to create a new component in Angular 2

  1. Can you tell me the difference between front-end and back-end development, languages and frameworks.
    They say that Angular is a front-end framework, can you tell me why?

  2. All classic websites works with an architecture that is called client/server over the http protocol.
    When you request a web page through your browser, a server located anywhere on the internet responds with a certain dynamic content depending on your request.
    That software, located on that server, which is giving us a response, is called back-end software. Let’s say it is written in PHP, it could be.
    When we receive a response from that server, the content of the response is loaded on our browser, that content is generally composed of HTML CSS and JavaScript.
    The content may now be executed on our browser, which is the client. That is the piece of software called front-end.
    I hope it is more clear now.
    See you

Leave a Reply

Give me your opinion, I will be grateful.