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 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..
|
