How To Create A 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.

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

Installing the Angular CLI.

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

Let's start coding.

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 { }

Final touches.

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. It depends 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, call it child.component.ts and child.component.html.

Import that component and add it to the declarations in app.module.ts. 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. Instead 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 network, thank you!