How To Create component in Angular 4 and 5 using CLI?

What Is Angular Component?

The Angular Components are classes that interact with the html file of the component, which gets displayed on your browsers.

Stayed Informed – Angular 5 and Angular 4 Documents

The component structure looks like -

1.      src/app/employee/employee.component.html

2.      src/app/employee/employee.component.spec.ts

3.      src/app/employee/employee.component.ts

4.      src/app/employee/employee.component.css

The CLI common Is -

ng g component employee

Here employee is a component name. The above files and folder are created by default when we execute angular-cli command - ng g component employee.

Steps -

D:\>cd Angular

D:\Angular>cd my-app

D:\Angular\my-app>ng g component employee

  create src/app/employee/employee.component.html (27 bytes)

  create src/app/employee/employee.component.spec.ts (642 bytes)

  create src/app/employee/employee.component.ts (277 bytes)

  create src/app/employee/employee.component.css (0 bytes)

  update src/app/app.module.ts (711 bytes)

Noted Point - Here Angular is folder and my-app is name of project.

The code looks like -

employee.component.html -

<p>

  employee works!

</p>

employee.component.spec.ts -

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

import { EmployeeComponent } from './employee.component';

describe('EmployeeComponent', () => {

  let component: EmployeeComponent;

  let fixture: ComponentFixture<EmployeeComponent>;

  beforeEach(async(() => {

    TestBed.configureTestingModule({

      declarations: [ EmployeeComponent ]

    })

    .compileComponents();

  }));

  beforeEach(() => {

    fixture = TestBed.createComponent(EmployeeComponent);

    component = fixture.componentInstance;

    fixture.detectChanges();

  });

  it('should create', () => {

    expect(component).toBeTruthy();

  });

});

employee.component.ts -

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

@Component({

  selector: 'app-employee',

  templateUrl: './employee.component.html',

  styleUrls: ['./employee.component.css']

})

export class EmployeeComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

employee.component.css -

.bgColor{

    background-color: azure;

}

app.module.ts –

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { LoginComponent } from './login/login.component';

import { UserComponent } from './user/user.component';

import { CardPipePipe } from './card-pipe.pipe';

import { MyUserDirDirective } from './my-user-dir.directive';

import { EmployeeComponent } from './employee/employee.component';

@NgModule({

  declarations: [

    AppComponent,

    LoginComponent,

    UserComponent,

    CardPipePipe,

    MyUserDirDirective,

    EmployeeComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

You can see the Video for Components creations – 

I hope you are enjoying with this post! Please share with you friends. Thank you!!