📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.
🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.
▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube
Learn Angular 8 at Angular 8 Tutorials and Examples
Getting Started With Angular 8
C:\Angular>node -v
v10.15.3
C:\Angular>npm -v
6.9.0
Install the latest version of Angular CLI
npm install -g @angular/cli
C:\angular>ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.0.1
Node: 10.15.3
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.800.1
@angular-devkit/core 8.0.1
@angular-devkit/schematics 8.0.1
@schematics/angular 8.0.1
@schematics/update 0.800.1
rxjs 6.4.0
Create Angular 8 Application using Angular CLI
ng new angular-custom-module
Create Module In Angular 8 App
C:\Angular\angular-custom-module>ng g module employee
CREATE src/app/employee/employee.module.ts (192 bytes)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class EmployeeModule { }
Create Angular Components
PS C:\Angular\angular-custom-module\src\app> ng g c .\employee\employee-list
CREATE src/app/employee/employee-list/employee-list.component.html (28 bytes)
CREATE src/app/employee/employee-list/employee-list.component.spec.ts (671 bytes)
CREATE src/app/employee/employee-list/employee-list.component.ts (296 bytes)
CREATE src/app/employee/employee-list/employee-list.component.css (0 bytes)
UPDATE src/app/employee/employee.module.ts (380 bytes)
Create Model and Service for Employee
PS C:\Angular\angular-custom-module\src\app> ng g class .\employee\employee
CREATE src/app/employee/employee.spec.ts (162 bytes)
CREATE src/app/employee/employee.ts (26 bytes)
PS C:\Angular\angular-custom-module\src\app> ng g s .\employee\employee
CREATE src/app/employee/employee.service.spec.ts (343 bytes)
CREATE src/app/employee/employee.service.ts (137 bytes)
Integrate Bootstrap with Angular
npm install bootstrap jquery --save
...
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
/* You can add global styles to this file, and also import other style files */
@import url(https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css)
employee.ts - Employee Model
export class Employee {
id: number;
firstName: string;
lastName: string;
emailId: string;
}
employee.service.ts - EmployeeService
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Employee } from './employee';
@Injectable({
providedIn: 'root'
})
export class EmployeeService {
constructor() { }
employees : Employee[] = [{
"id": 1,
"firstName": "ramesh",
"lastName": "Fadatare",
"emailId": "ramesh@gmail.com"
},
{
"id": 2,
"firstName": "Tony",
"lastName": "Stark",
"emailId": "tony@gmail.com"
}]
public getEmployees(): any {
const employeesObservable = new Observable(observer => {
setTimeout(() => {
observer.next(this.employees);
}, 1000);
});
return employeesObservable;
}
}
employee-list.component.ts - EmployeeListComponent
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Employee } from '../employee';
import { EmployeeService } from '../employee.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
employees: Observable<Employee[]>;
constructor(private employeeService: EmployeeService) {}
ngOnInit() {
this.getEmployees();
}
getEmployees() {
this.employees = this.employeeService.getEmployees();
}
}
employee-list.component.html - HTML Component Template
<div class="panel panel-primary">
<div class="panel-heading">
<h2>Employee List</h2>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employees | async">
<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
<td>{{employee.emailId}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Importing a Feature or Custom Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// import the feature module here so you can add it to the imports array below
import { EmployeeModule } from './employee/employee.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
EmployeeModule // add the feature module here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Configure the Routing - AppRoutingModule
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EmployeeListComponent } from './employee/employee-list/employee-list.component';
const routes: Routes = [
{
path: '',
component: EmployeeListComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.ts - AppComponent
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-custom-module';
}
app.component.html
<div class="container">
<router-outlet></router-outlet>
</div>
Running Angular 8 Application
ng serve
Learn Angular 8 at Angular 8 Tutorials and Examples
Comments
Post a Comment
Leave Comment