How to create new components in Angular using the CLI

How to create new components in Angular using the CLI : It just so happens, when creating your own new components in Angular, you can finish the cycle totally by hand. That was useful for learning the subtleties of what goes in to an Angular Component. Well we as a whole like automation, and you can really build another Angular command automatically using the Angular CLI, That sounds magnificent as less composing code is a reward in my book. How about we take a stab at building another Angular Component yet this time, we’ll utilize that extremely helpful Angular command line interface.

So before you start generating component using the CLI, please setup Angular app locally on your system. if you already setup angular app skip this step and move to Step 2 : CLI Component Generation

Step 1: Angular App Installation :

See how to install Angular 
after installation move to Step 2 below.

Step  2 : 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 edit-new-corporate to create a new edit-new-corporate component.

PS D:\corporateApp> ng g c components/edit-new-corporate
or 
PS D:\corporateApp> ng genarte component components/edit-new-corporate

> corporateApp@0.0.0 ng D:\corporateApp
> ng "g" "c" "components/edit-new-corporate"

CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.html (33 bytes)
CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.spec.ts (700 bytes)
CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.ts (322 bytes)
CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.scss (0 bytes)

Alright exceptionally interesting! It seems as though the CLI naturally made the new folder to hold our new component in src/components/edit-corporate. Likewise we see four new files related with the naturally created component.

edit-new-corporate.component.html

<p>
  edit-new-corporate works!
</p>

edit-new-corporate.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { EditNewCorporateComponent } from './edit-new-corporate.component';

describe('EditNewCorporateComponent', () => {
  let component: EditNewCorporateComponent;
  let fixture: ComponentFixture<EditNewCorporateComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditNewCorporateComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EditNewCorporateComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

edit-new-corporate.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-edit-new-corporate',
  templateUrl: './edit-new-corporate.component.html',
  styleUrls: ['./edit-new-corporate.component.scss']
})
export class EditNewCorporateComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

edit-new-corporate.component.css

/* todo: add your styles here */

Tags: AngularHTML