Angular 4

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!!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^