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