How to create a new Component in Angular2 Como crear un nuevo Component en Angular2

Hello everyone,
In this post you are going to find how you can create a new Component using Angular CLI, and also add it in an html file.

If you don't know how to create an Angular 2 Project, please see this post to complete it first http://angular2university.blogspot.pe/2017/06/steps-to-build-your-first-angular-2.html


Angular CLI provide us a set of command to create some things of Angular 2, in this case we are going to use the first one.

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Guard	ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

Execute this Command to create a 'customers' component.

       
 ng g component customers

       

When the command is finished you should see that a new folder was created as you can see below.

Angular CLI has added an extra declaration into you app.module.ts to import the last component that you added.

app.module.ts

       
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 {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MaterialModule} from '@angular/material';
import { CustomersComponent } from './customers/customers.component';

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

        

How can I add this new component in another component?

Just you need use its selector-name Wich you can find it on the customers.component.ts file see the follow picture.

In this case it's called [app-customers]

Now we can write it in anywhere of our application.

For example if we need add this customers component into the app component, you could write the following.

Finally, please Run the application and see the results, You should see as the following picture.

Well Done! Your application has two components so far.

We created a video in Spanish as well😊.