Skip to content

Online Portfolio

Research and Development

  • Angular
  • React JS
  • Javascript
  • jQuery
  • CSS
  • Ask Question
  • DWQA Questions

How to create new components in Angular using the CLI

  1. Home
  2. How to create new components in Angular using the CLI
How to create new components in Angular using the CLI
  • admin
  • August 26, 2021
  • 0
Posted in Angular, HTMLTagged in Angular, HTML

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 */
Post Views: 3,884

admin

View all posts by admin | Website

Previous post

How to Add Bootstrap to Angular

Next post

Angular 11 How to convert HTML to image?

Related Posts

Angular 11 How to convert HTML to image

Angular 11 How to convert HTML to image?

  • admin
  • September 30, 2021
  • 0

Angular 11 How to convert HTML to image, This article will tell the developer how to change over HTML into an image utilizing the html-to-image NPM bundle. developer can change […]

View Post
How to Add Bootstrap to Angular

How to Add Bootstrap to Angular

  • admin
  • August 23, 2021
  • 0

How to Add Bootstrap to Angular : In this article , we will tell you the best way to add Bootstrap to the Angular application. This instructional exercise utilizes Bootstrap […]

View Post

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

  • Angular 11 How to convert HTML to image?September 30, 2021
  • How to create new components in Angular using the CLIAugust 26, 2021
  • How to Add Bootstrap to AngularAugust 23, 2021
  • Angular Google Bar Chart ExampleAugust 19, 2021
  • Javascript Interview QuestionsAugust 18, 2021

Copyright © 2021 | All Rights Reserved.

Loading