Categories
Angular JavaScript Programming Tutorials Web Dev

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, thank you! Do you like the way I write code? Hire me! My email is on the homepage, let's make a chat to see if we can work together.