How to Create New Component in Angular 6

It turns out that when building your own new components in Angular, you can complete the process entirely by hand like we did in the Angular Component Tutorial. That was good for learning the details of what goes in to an Angular Component. Well we all like automation, and you can actually build a new Angular command automatically using the Angular CLI! That sounds awesome as less typing out code is a bonus in my book. Let's try building another Angular Component but this time, we'll make use of that very convenient Angular command line interface.

---

CLI Component Generation

You'll want to have the ng serve process already running in a command line window for your application. Then, you can open another instance of the command line and type ng generate component virtual-machines to create a new virtual-machines component.

Ok very interesting! It looks like the CLI automatically created the new folder to hold our new component in app/virtual-machines . In addition we see four new files associated with the automatically generated component.

• virtual-machines.component.html

              <p>   virtual-machines works! </p>            

• virtual-machines.component.spec.ts

              import { async, ComponentFixture, TestBed } from '@angular/core/testing';  import { VirtualMachinesComponent } from './virtual-machines.component';  describe('VirtualMachinesComponent', () => {   let component: VirtualMachinesComponent;   let fixture: ComponentFixture<VirtualMachinesComponent>;    beforeEach(async(() => {     TestBed.configureTestingModule({       declarations: [ VirtualMachinesComponent ]     })     .compileComponents();   }));    beforeEach(() => {     fixture = TestBed.createComponent(VirtualMachinesComponent);     component = fixture.componentInstance;     fixture.detectChanges();   });    it('should create', () => {     expect(component).toBeTruthy();   }); });            

• virtual-machines.component.ts

              import { Component, OnInit } from '@angular/core';  @Component({   selector: 'app-virtual-machines',   templateUrl: './virtual-machines.component.html',   styleUrls: ['./virtual-machines.component.css'] }) export class VirtualMachinesComponent implements OnInit {    constructor() { }    ngOnInit() {   }  }            

• virtual-machines.component.css

              /* todo: add your styles here */            

---

Nesting Angular Components

Now our application has two custom built components. Those are virtual-machine and virtual-machines. Now the purpose of our virtual-machines component is to hold one or more instances of a virtual-machine component. Therefore, we are going to nest the virtual-machine inside of virtual-machines. We can open up virtual-machines.component.html and remove the default markup we see above. We'll replace it with two instances of the virtual-machine component like so.

            <app-virtual-machine></app-virtual-machine> <hr> <app-virtual-machine></app-virtual-machine>          

Now, recall that when we built an angular component by hand, we had to manually register the component in the app.modules.ts file. The nice thing about building an Angular component using the command line like we did here is that this step is taken care of automatically for you. Highlighted below is the the import statement for our new virtual-machines component and the addition to the declarations array.

            import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';  import { AppComponent } from './app.component'; import { VirtualMachineComponent } from './virtual-machine/virtual-machine.component'; import { VirtualMachinesComponent } from './virtual-machines/virtual-machines.component';  @NgModule({   declarations: [     AppComponent,     VirtualMachineComponent,     VirtualMachinesComponent   ],   imports: [     BrowserModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }          

Now we want to check the virtual-machines.component.ts Typescript file to see that the CLI also automatically scaffolds the @Component decorator and it's configuration including the selector, templateUrl, and styleUrls.

            import { Component, OnInit } from '@angular/core';  @Component({   selector: 'app-virtual-machines',   templateUrl: './virtual-machines.component.html',   styleUrls: ['./virtual-machines.component.css'] }) export class VirtualMachinesComponent implements OnInit {    constructor() { }    ngOnInit() {   }  }          

---

Use The New Component!

Finally, in order to use the new Angular component we just built we'll need to update app.component.html

            <div class="jumbotron">   <div class="container">     <app-virtual-machines></app-virtual-machines>   </div> </div>          

So what should happen now? Well, now there is an instance of <app-virtual-machines></app-virtual-machines> in the main app.component.html file. We had nested two instances of <app-virtual-machine></app-virtual-machine> inside of that component. That means that at this point we should see two virtual-machine components on the page and that is exactly what we get when visiting the browser.

We can also inspect the generated markup in Chrome developer tools and find that indeed we have two angular components nested inside of the outer wrapping component.

            <app-virtual-machines _ngcontent-c0="" _nghost-c1="">     <app-virtual-machine _ngcontent-c1=""><h1>The Virtual Machine Component</h1></app-virtual-machine>     <hr _ngcontent-c1="">     <app-virtual-machine _ngcontent-c1=""><h1>The Virtual Machine Component</h1></app-virtual-machine> </app-virtual-machines>          

---

How To Create New Components In Angular Using The CLI Summary

This tutorial gave us a nice overview of how to create new angular components by making use of the helpful angular command line interface. We also saw how to nest components inside other components. We are able to use component selectors in any other template of any other component.

How to Create New Component in Angular 6

Source: https://vegibit.com/how-to-create-new-components-in-angular-using-the-cli/

Share this post