Creating Component in Angular2

In last post Starting with Angular2 we have learned installing angular-cli and starting server. In this post we’ll create simple Angular2 Component using angular-cli. So let’s start.

Get code from Github: Angular2 Basics

So we’ll be using the same directory which we’ve used in last post. Open terminal tab in that directory and run following command (make sure app is running in other terminal window):

ng generate component form --inline-template --inline-style

OR

ng g c form -it -is

g — generate

c — component

form — {{component_name}}

it — inline-template

is — inline-style

 

This will generate two files: Component file and Component spec file inside src/app/{{component_name}}/ directory.

component_1

Let’s see what’s inside component file — form.component.ts

@Component({
selector: 'app-form',
template: `
form Works!`,
styles: []
})

So we have component’s selector here which is app-form.

Let’s use this selector in app component file — app.component.ts

So new code will be like this,

@Component({
selector: 'app-root',
template: '',
styles: []
})

Now your browser should auto refresh and it should display this:

component_2

 

Alright then, now you try to play with this component via changing templates or instead of using inline template, use templateUrl and link to html file!

 

Get code from Github: Angular2 Basics