python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions