Angular 8 HttpClient & Http Tutorial – Build and Consume RESTful API
We'll learn to create and consume RESTful APIs in Angular 8 project. ... to Receive and Delete the Data in Angular 8 HttpClient Service; Update Data in Angular CRUD App ... Which stylesheet format would you like to use?
Angular 8 HttpClient & Http tutorial is going to be discussed in this blog today. We’ll learn to create and consume RESTful APIs in Angular 8 project. To manage the data on the remote server, we make GET, POST, PUT and Delete using HttpClient API. We are required to import and setup HttpClient service in Angular 8 project to consume REST APIs.
To work with HttpClient service in Angular, you need to import the HttpClientModule in app.module.ts file. Then inject HttpClient service in constructor method after that you can hit the remote server via HTTP’s POST, GET, PUT and DELETE methods.
HttpClient API service is used to make communication between front-end web apps with backend services. This communication is done over HTTP protocol. Angular 8 HttpClient service makes the communication with remote server very easy. It needs to be imported via @angular/common/http package.
Benefits of HttpClient Service
- Easy Testing
- Typed Request & Response Objects
- Request Interception
- Response Interception
- APIs Observable Support
- Easy Error Handling
What Does Angular.io say About HttpClient?
“HttpClient is available as an injectable class, with methods to perform HTTP requests. Each request method has multiple signatures, and the return type varies based on the signature that is called (mainly the values of observe and responseType).”
Angular 8 HttpClient Methods- request()
- delete()
- get()
- patch()
- post()
- put()
- head()
- jsonp()
- options()
01 – Getting Started
Setup Node JS
In the first step, We’ll set up the development environment in our system for setting up an Angular 8 project from scratch.
Follow this tutorial to set up Node JS in your system: How To Install Node JS?
Node JS will allow us to install the required packages for this Angular 8 HttpClient tutorial.
In the next step, we’ll be installing Angular CLI with the help of Node Package Manager (NPM).
npm install @angular/cli -gAngular 8 HttpClient & Http Tutorial – Build, Consume RESTful API
By Digamber Rawat Last updated on July 26, 2019
Angular 8 HttpClient & Http tutorial is going to be discussed in this blog today. We’ll learn to create and consume RESTful APIs in Angular 8 project. To manage the data on the remote server, we make GET, POST, PUT and Delete using HttpClient API. We are required to import and setup HttpClient service in Angular 8 project to consume REST APIs.
To work with HttpClient service in Angular, you need to import the HttpClientModule in app.module.ts file. Then inject HttpClient service in constructor method after that you can hit the remote server via HTTP’s POST, GET, PUT and DELETE methods.
HttpClient API service is used to make communication between front-end web apps with backend services. This communication is done over HTTP protocol. Angular 8 HttpClient service makes the communication with remote server very easy. It needs to be imported via @angular/common/http package.
Benefits of HttpClient Service
- Easy Testing
- Typed Request & Response Objects
- Request Interception
- Response Interception
- APIs Observable Support
- Easy Error Handling
What Does Angular.io say About HttpClient?
“HttpClient is available as an injectable class, with methods to perform HTTP requests. Each request method has multiple signatures, and the return type varies based on the signature that is called (mainly the values of observe and responseType).”
Angular 8 HttpClient Methods- request()
- delete()
- get()
- patch()
- post()
- put()
- head()
- jsonp()
- options()
Table of Contents
- Getting Started
- Installation & Setup Angular 8 Project
- Set up Fake JSON Backend Server in Angular 8 App
- Import HttpClientModule in Angular 8
- Create Angular 8 Service to Consume RESTful APIs
- Make HTTP POST Request to Add the Data via HttpClient Service in Angular 8
- Make HTTP (GET & DELETE) Requests to Receive and Delete the Data in Angular 8 HttpClient Service
- Update Data in Angular CRUD App
01 – Getting Started
Setup Node JS
In the first step, We’ll set up the development environment in our system for setting up an Angular 8 project from scratch.
Follow this tutorial to set up Node JS in your system: How To Install Node JS?
Node JS will allow us to install the required packages for this Angular 8 HttpClient tutorial.
In the next step, we’ll be installing Angular CLI with the help of Node Package Manager (NPM).
npm install @angular/cli -g
2. Installation & Setup Angular 8 Project
To create front-end of our demo app we need to install Angular 8 app. Run the below command in your terminal.
ng new angular8-httpclient-tutorial ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS
Once your project is downloaded, then get into the project folder.
cd angular8-httpclient-tutorial
We’ll also install Bootstrap 4 UI library in Angular 8 project using given below command.
npm install bootstrap
To use the Bootstrap 4 ui components go to angular.json file and replace the following code.
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]
Create components in Angular 8 app to manage the data.
# ng g component components/add-issue ng g component components/edit-issue ng g component components/issue-list
Run the following command to start the app.
ng serve03 – Set up Fake JSON Backend Server in Angular 8 App
We are going to create a fake backend server using json-server NPM module in our Angular 8 app. This module will allow us to communicate with the server we can send and receive the data locally.
Run the below command to set fake json-server globally.
sudo npm install -g json-server
In the root folder of your Angular 8 project, create a folder by the name of backend and also create a file by the name of database.json. This file will have our fake JSON data.
mkdir backend && cd backend && touch database.json
In next step go to your database.json file and add some fake data.
{
"bugtracking": [
{
"issue_name": "Table Improvement",
"issue_message": "Issue tracking is awesome because of collaboration",
"id": 1
},
{
"issue_name": "Tooltip Issue",
"issue_message": "Issue tracking is awesome because of collaboration",
"id": 2
}
]
}
Finally, we are done setting up a fake JSON server in our Angular 8 app, now run the command to start the fake JSON server.
json-server --watch backend/database.json
{^_^}/ hi!
Loading backend/database.json
Done
Resources
http://localhost:3000/bugtracking
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching...
If you are getting this response in your terminal that means you are ready to send and receive data using HttpClient service in Angular 8.
Check out the below urls
Resources: http://localhost:3000/bugtracking
Home: http://localhost:3000
Angular 8 Front-end: http://localhost:4200
4. Import HttpClientModule in Angular 8
This service configures the dependency injector for HttpClient with supporting services for XSRF.
To make the HTTP request to communicate with the server, we first import the HttpClientModule service in our Angular 8 app.
Go to app.module.ts and paste the following code.
import { HttpClientModule } from '@angular/common/http';
Include the HttpClientModule in @NgModule's imports array.
@NgModule({
imports: [
HttpClientModule
]
})
05 – Create Angular 8 Service to Consume RESTful APIsIn the next step, we are going to create Angular 8 service file, this file will allow us to consume RESTful API. We’ll import HttpClient, HttpHeaders services to make the HTTP request work. We’ll create CRUD operations and also write some error handling logic in it.
Angular 8 Service CRUD Tasks:
- Create Bug
- Show Bug List
- Update Bug
- Delete Bug
But before we create the service file we need to create an interface class in which we’ll define the data type of our bug tracking demo app.
Create Bug class to define data type:
mkdir shared && cd shared
Create a bug.ts file and paste the following code.
export class Bug {
id: string;
issue_name: string;
issue_message: string;
}
Create BugService Class, run the below command:
ng g s shared/bug
Now, paste the below code in bug.service.ts file to create CRUD operation in our bug tracking app.
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Bug } from './bug';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class BugService {
// Base url
baseurl = 'http://localhost:3000';
constructor(private http: HttpClient) { }
// Http Headers
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
}
// POST
CreateBug(data): Observable<Bug> {
return this.http.post<Bug>(this.baseurl + '/bugtracking/', JSON.stringify(data), this.httpOptions)
.pipe(
retry(1),
catchError(this.errorHandl)
)
}
// GET
GetIssue(id): Observable<Bug> {
return this.http.get<Bug>(this.baseurl + '/bugtracking/' + id)
.pipe(
retry(1),
catchError(this.errorHandl)
)
}
// GET
GetIssues(): Observable<Bug> {
return this.http.get<Bug>(this.baseurl + '/bugtracking/')
.pipe(
retry(1),
catchError(this.errorHandl)
)
}
// PUT
UpdateBug(id, data): Observable<Bug> {
return this.http.put<Bug>(this.baseurl + '/bugtracking/' + id, JSON.stringify(data), this.httpOptions)
.pipe(
retry(1),
catchError(this.errorHandl)
)
}
// DELETE
DeleteBug(id){
return this.http.delete<Bug>(this.baseurl + '/bugtracking/' + id, this.httpOptions)
.pipe(
retry(1),
catchError(this.errorHandl)
)
}
// Error handling
errorHandl(error) {
let errorMessage = '';
if(error.error instanceof ErrorEvent) {
// Get client-side error
errorMessage = error.error.message;
} else {
// Get server-side error
errorMessage = Error Code: ${error.status}\nMessage: ${error.message};
}
console.log(errorMessage);
return throwError(errorMessage);
}
}
Then go to app.module.ts file and import the Angular 8 service and inject into the providers array, like given below.
import { BugService } from 'shared/bug.service';
@NgModule({
declarations: [...],
imports: [...],
providers: [BugService],
bootstrap: [...]
})
export class AppModule { }
06 – Make HTTP POST Request to Add the Data via HttpClient Service in Angular 8Let’s add the data in local server using HttpClient service in Angular 8. Go to components > add-issue.component.ts file and add the following code.
import { Component, OnInit, NgZone } from '@angular/core';
import { BugService } from '../../shared/bug.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-add-issue',
templateUrl: './add-issue.component.html',
styleUrls: ['./add-issue.component.css']
})
export class AddIssueComponent implements OnInit {
issueForm: FormGroup;
IssueArr: any = [];
ngOnInit() {
this.addIssue()
}
constructor(
public fb: FormBuilder,
private ngZone: NgZone,
private router: Router,
public bugService: BugService
){ }
addIssue() {
this.issueForm = this.fb.group({
issue_name: [''],
issue_message: ['']
})
}
submitForm() {
this.bugService.CreateBug(this.issueForm.value).subscribe(res => {
console.log('Issue added!')
this.ngZone.run(() => this.router.navigateByUrl('/issues-list'))
});
}
}
Go to components > add-issue.component.html file and add the following code.
<div class="container wrapper wrapper2">
<div class="row"><!-- Form --> <div class="col-md-12"> <h3>Add Issue</h3> <form [formGroup]="issueForm" (ngSubmit)="submitForm()" novalidate> <div class="form-group"> <label>Issue</label> <input type="text" formControlName="issue_name" class="form-control" maxlength="20"> </div> <div class="form-group"> <label>Issue Details</label> <textarea class="form-control" formControlName="issue_message" rows="3" maxlength="50"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div></div>
Now, we can easily create an issue and save it to the local server using HttpClient and HttpHeaders Angular 8 services.
07 – Make HTTP (GET & DELETE) Requests to Receive and Delete the Data in Angular 8 HttpClient Service
In this part of the tutorial, we are going to learn how to receive and delete the data via HttpClient API in an Angular CRUD app. We’ll use the Bootstrap 4 table to show the data on the frontend.
Go to components > issue-list.component.ts file and paste the following code.
import { Component, OnInit } from '@angular/core';
import { BugService } from '../../shared/bug.service';
@Component({
selector: 'app-issue-list',
templateUrl: './issue-list.component.html',
styleUrls: ['./issue-list.component.css']
})
export class IssueListComponent implements OnInit {
IssuesList: any = [];
ngOnInit() {
this.loadEmployees();
}
constructor(
public bugService: BugService
){ }
// Issues list
loadEmployees() {
return this.bugService.GetIssues().subscribe((data: {}) => {
this.IssuesList = data;
})
}
// Delete issue
deleteIusse(data){
var index = index = this.IssuesList.map(x => {return x.issue_name}).indexOf(data.issue_name);
return this.bugService.DeleteBug(data.id).subscribe(res => {
this.IssuesList.splice(index, 1)
console.log('Issue deleted!')
})
}
}
Go to components > issue-list.component.html file and paste the following code.
<div class="container wrapper">
<div class="row"><!-- Issue table --> <div class="col-md-12"> <div class="inner"> <h3>My Issues</h3> <table class="table table-bordered"> <thead> <tr> <th scope="col">#</th> <th scope="col">Issue Name</th> <th scope="col">Issue Details</th> <th scope="col">Action</th> </tr> </thead> <tbody> <tr *ngFor="let issues of IssuesList"> <th scope="row">{{issues.id}}</th> <td>{{issues.issue_name}}</td> <td>{{issues.issue_message}}</td> <td> <button type="button" class="btn btn-success btn-sm move-right" [routerLink]="['/edit-issue/', issues.id]">Edit</button> <button type="button" class="btn btn-danger btn-sm" (click)="deleteIusse(issues)">Remove</button> </td> </tr> </tbody> </table> </div> </div> </div></div>
08 – Update Data in Angular CRUD App
In this final part of this tutorial, we are going to learn how to make PUT Request via HttpClient Angular 8 service to update the data on the server.
Head over to the components > edit-issue.component.ts file and paste the following code.
import { Component, OnInit, NgZone } from '@angular/core';
import { BugService } from '../../shared/bug.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-edit-issue',
templateUrl: './edit-issue.component.html',
styleUrls: ['./edit-issue.component.css']
})
export class EditIssueComponent implements OnInit {
IssuesList: any = [];
updateIssueForm: FormGroup;
ngOnInit() {
this.updateForm()
}
constructor(
private actRoute: ActivatedRoute,
public bugService: BugService,
public fb: FormBuilder,
private ngZone: NgZone,
private router: Router
) {
var id = this.actRoute.snapshot.paramMap.get('id');
this.bugService.GetIssue(id).subscribe((data) => {
this.updateIssueForm = this.fb.group({
issue_name: [data.issue_name],
issue_message: [data.issue_message]
})
})
}
updateForm(){
this.updateIssueForm = this.fb.group({
issue_name: [''],
issue_message: ['']
})
}
submitForm(){
var id = this.actRoute.snapshot.paramMap.get('id');
this.bugService.UpdateBug(id, this.updateIssueForm.value).subscribe(res => {
this.ngZone.run(() => this.router.navigateByUrl('/issues-list'))
})
}
}
Head over to the components > edit-issue.component.html file and paste the following code.
<div class="container wrapper wrapper2">Conclusion
<div class="row"><!-- Form --> <div class="col-md-12"> <h3>Add Issue</h3> <form [formGroup]="updateIssueForm" (ngSubmit)="submitForm()" novalidate> <div class="form-group"> <label>Issue</label> <input type="text" formControlName="issue_name" class="form-control" maxlength="20"> </div> <div class="form-group"> <label>Issue Details</label> <textarea class="form-control" formControlName="issue_message" rows="3" maxlength="50"></textarea> </div> <button type="submit" class="btn btn-primary">Update</button> </form> </div> </div></div>
Finally, we’ve completed the Angular 8 HttpClient & Http Tutorial. In this tutorial, we’ve learned how to make HTTP POST, GET, DELETE & PUT request to manage the data on the server along with some basic error handling. If you like this tutorial please share it with others. You can found GitHub repo here.
This post was originally published here
Angular 8 Tutorial By Example: (REST API, HttpClient GET, Components, Services & ngFor)
Angular 8 Tutorial By Example: (REST API, HttpClient GET, Components, Services & ngFor) - In this tutorial, you'll learn by example how to send GET requests to REST API servers in your Angular 8 application using HttpClient...
Angular 8 Tutorial By Example: (REST API, HttpClient GET, Components, Services & ngFor) - In this tutorial, you'll learn by example how to send GET requests to REST API servers in your Angular 8 application using HttpClient...
We’ll also learn how to use the basic concepts of Angular like components and services and how to use the ngFor directive to display collections of data.
We’ll be consuming a JSON API available from NewsAPI.org
Throughout this tutorial, we are going to build a simple example from scratch using Angular CLI 8 and we’ll see how to use HttpClient to send GET requests to third-party REST API servers and how to consume and display the returned JSON data.
In more details, we'll learn:
- How to create an Angular 8 project using Angular CLI,
- How to quickly set up routing in our project,
- How to create Angular components and services,
- How to subscribe to Observables,
- How to use the
ngFordirective in templates to iterate over data.
You can also follow this tutorial as a video:
PrerequisitesBefore getting started, you need a few requirements. You need to have the following tools installed on your development machine:
- Node.js and npm. You can install both of them from the official website.
- Angular CLI 8 (You can install it from npm using:
npm install -g @angular/cli)
Now let’s create our Angular 8 project. Open a new terminal and run the following command:
$ ng new angular-httpclient-demo
The CLI will prompt you if Would you like to add Angular routing? (y/N), type y. And Which stylesheet format would you like to use? Choose CSS and type Enter.
Next, you can serve your application locally using the following commands:
$ cd ./angular-httpclient-demo
$ ng serve
Your application will be running from <a href="http://localhost:4200" target="_blank">http://localhost:4200</a>.
Getting News Data
Before you can fetch the news data from NewsAPI.org which offers a free plan for open source and development projects, you first need to go the register page for getting an API key.
Next, let’s create a service that will take care of getting data from the news API. Open a new terminal and run the following command:
$ ng generate service api
Setting up HttpClient
Next, open the src/app/app.module.ts file then import HttpClientModule and add it to the importsarray:
// [...]
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
// [...]
HttpClientModule,
],
// [...]
})
export class AppModule {}
That's all, we are now ready to use the HttpClient in our project.
Injecting HttpClient in The Angular Service
Next, open the src/app/api.service.ts file and inject HttpClient via the service constructor:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private httpClient: HttpClient) { }
}
Sending GET Request for Fetching Data
Next, define an API_KEY variable which will hold your API key from the News API:
export class ApiService {
API_KEY = 'YOUR_API_KEY';
Finally, add a method that sends a GET request to an endpoint for TechCrunch news:
public getNews(){
return this.httpClient.get(`https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${this.API_KEY}`);
}
That’s all we need to add for the service.
How the<strong>HttpClient.get()</strong> Method Works
The HttpClient get() method is designed to send HTTP GET requests. The syntax is as follows:
get(url: string, options: {
headers?: HttpHeaders;
observe: 'response';
params?: HttpParams;
reportProgress?: boolean;
responseType?: 'json';
withCredentials?: boolean;
}): Observable<HttpResponse<Object>>;
It takes a REST API endpoint and an optional options object and returns an Observable instance.
Now, let's create an Angular 8 component for displaying the news data. Head back to your terminal and run the following command:
$ ng generate component news
Injecting ApiService in Your Component
Next, open the src/app/news/news.component.ts file and start by importing ApiService in your component:
import { ApiService } from '../api.service';
Next, you need to inject ApiService via the component's constructor:
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
constructor(private apiService: ApiService) { }
}
Sending the GET Request & Subscribing to The Observable
Next, define an articles variable and call the getNews() method of the API service in the ngOnInit()method of the component:
export class NewsComponent implements OnInit {
articles;
constructor(private apiService: ApiService) { }
ngOnInit() {
this.apiService.getNews().subscribe((data)=>{
console.log(data);
this.articles = data['articles'];
});
}
}
This will make sure our data is fetched once the component is loaded.
We call the getNews() method and subscribe to the returned Observable which will send a GET request to the news endpoint.
Displaying Data in The Template with NgFor
Let’s now display the news articles in our component template. Open the src/app/news.component.htmlfile and update it as follows:
<div *ngFor="let article of articles">
<h2>{{article.title}}</h2>
<p>
{{article.description}}
</p>
<a href="{{article.url}}">Read full article</a>
</div>
Adding the Angular Component to The Router
Angular CLI 8 has automatically added routing for us, so we don’t need to set up anything besides adding the component(s) to our Router configuration. Open the src/app/app-routing.module.ts file and start by importing the news component as follows:
import { NewsComponent } from './news/news.component';
Next, add the component to the routes array:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NewsComponent } from './news/news.component';
const routes: Routes = [
{path:'news', component: NewsComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
You can now access your component from the /news path.
In this tutorial, we used Angular 8 to build a simple news application that retrieves data from a JSON REST API using the get() method of HttpClient. We’ve seen how to subscribe to the RxJS Observable returned by the get() method and how to use the *ngFor directive to iterate over fetched data in the template. Finally, we’ve seen how we can create an Angular 8 project using Angular CLI v8, how to generate components and services and how to configure routing for the component.
Angular 7 CRUD with Nodejs and MySQL Example
Angular7 CRUD with nodejs and mysql example - Hey there, Today we will proceed to create a demo for CRUD with Mysql, Express, Angular7(MEAN) and Nodejs from scratch using Angular CLI
Below are the requirements for creating the CRUD on MEAN
- Node.js
- Angular CLI
- Angular 7
- Mysql
- IDE or Text Editor
We assume that you have already available the above tools/frameworks and you are familiar with all the above that what individually actually does.
So now we will proceed step by step to achieve the task.
1. Update Angular CLI and Create Angular 7 Application
At first, We have to update the Angular CLI to the latest version. Open the terminal then go to the project folder and then type the below command to update the Angular CLI
sudo npm install -g @angular/cli
Once the above task finishes, Next task is to create new angular application with below command. So go to your project folder and then type below command:
ng new angular7-crud
then go to the newly created folder of angular application with cd /angular7-crud and type **ng serve. **Now, open the browser then go to http://localhost:4200 you should see this page.
2. Create a server with node.js express and Mysql for REST APIs
create a separate folder named server for server-side stuff, Then move inside folder and create server.js by typing touch server.js
Let’s have a look on the server.js file
let app = require('express')(),
server = require('http').Server(app),
bodyParser = require('body-parser')
express = require('express'),
cors = require('cors'),
http = require('http'),
path = require('path');
let articleRoute = require('./Routes/article'),
util = require('./Utilities/util');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false }));
app.use(cors());
app.use(function(err, req, res, next) {
return res.send({ "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.SOMETHING_WENT_WRONG });
});
app.use('/article', articleRoute);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next();
});
/*first API to check if server is running*/
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../server/client/dist/index.html'));
})
server.listen(3000,function(){
console.log('app listening on port: 3000');
});
In the above file we can see, at the top, there are required packages for the app. Below that body parsing, middleware and routing is done.
The next task is to create routes and create a file article.js . So creating a folder name ‘Routes’ and adding article.js within it.
Add the below code for routing in article.js inside routing folder
let express = require('express'),
router = express.Router(),
util = require('../Utilities/util'),
articleService = require('../Services/article');
/**Api to create article */
router.post('/create-article', (req, res) => {
articleService.createArticle(req.body, (data) => {
res.send(data);
});
});
// /**Api to update article */
router.put('/update-article', (req, res) => {
articleService.updateArticle(req.body, (data) => {
res.send(data);
});
});
// /**Api to delete the article */
router.delete('/delete-article', (req, res) => {
articleService.deleteArticle(req.query, (data) => {
res.send(data);
});
});
/**Api to get the list of article */
router.get('/get-article', (req, res) => {
documentService.getArticle(req.query, (data) => {
res.send(data);
});
});
// /**API to get the article by id... */
router.get('/get-article-by-id', (req, res) => {
articleService.getArticleById(req.query, (data) => {
res.send(data);
});
});
module.exports = router;
Now create a folder named Utilities for all config, common methods and mysql connection config.
Now I am adding config values in a file named config.js
let environment = "dev";
let serverURLs = {
"dev": {
"NODE_SERVER": "http://localhost",
"NODE_SERVER_PORT": "3000",
"MYSQL_HOST": 'localhost',
"MYSQL_USER": 'root',
"MYSQL_PASSWORD": 'password',
'MYSQL_DATABASE': 'demo_angular7_crud',
}
}
let config = {
"DB_URL_MYSQL": {
"host": `${serverURLs[environment].MYSQL_HOST}`,
"user": `${serverURLs[environment].MYSQL_USER}`,
"password": `${serverURLs[environment].MYSQL_PASSWORD}`,
"database": `${serverURLs[environment].MYSQL_DATABASE}`
},
"NODE_SERVER_PORT": {
"port": `${serverURLs[environment].NODE_SERVER_PORT}`
},
"NODE_SERVER_URL": {
"url": `${serverURLs[environment].NODE_SERVER}`
}
};
module.exports = {
config: config
};
Now configure mysql connection. So I am writing the connection with database in a separate file. So creating a file named mysqkConfig.js under Utilities folder and adding the below line of code for mysql connection:
var config = require("../Utilities/config").config;
var mysql = require('mysql');
var connection = mysql.createConnection({
host: config.DB_URL_MYSQL.host,
user: config.DB_URL_MYSQL.user,
password: config.DB_URL_MYSQL.password,
database: config.DB_URL_MYSQL.database,
});
connection.connect(() => {
require('../Models/Article').initialize();
});
let getDB = () => {
return connection;
}
module.exports = {
getDB: getDB
}
Now I am creating separate file name util.js to save common methods and common status code/message:
// Define Error Codes
let statusCode = {
OK: 200,
FOUR_ZERO_FOUR: 404,
FOUR_ZERO_THREE: 403,
FOUR_ZERO_ONE: 401,
FIVE_ZERO_ZERO: 500
};
// Define Error Messages
let statusMessage = {
SERVER_BUSY : 'Our Servers are busy. Please try again later.',
DATA_UPDATED: 'Data updated successfully.',
DELETE_DATA : 'Delete data successfully',
};
module.exports = {
statusCode: statusCode,
statusMessage: statusMessage
}
Now the next part is model, So create a folder named Models and create a file **Article.js **and add the below code in it:
let mysqlConfig = require("../Utilities/mysqlConfig");
let initialize = () => {
mysqlConfig.getDB().query("create table IF NOT EXISTS article (id INT auto_increment primary key, category VARCHAR(30), title VARCHAR(24))");
}
module.exports = {
initialize: initialize
}
Now create DAO folder and add a file articleDAO.js for writting the mysql queries common functions:
let dbConfig = require("../Utilities/mysqlConfig");
let getArticle = (criteria, callback) => {
//criteria.aricle_id ? conditions += ` and aricle_id = '${criteria.aricle_id}'` : true;
dbConfig.getDB().query(`select * from article where 1`,criteria, callback);
}
let getArticleDetail = (criteria, callback) => {
let conditions = "";
criteria.id ? conditions += ` and id = '${criteria.id}'` : true;
dbConfig.getDB().query(`select * from article where 1 ${conditions}`, callback);
}
let createArticle = (dataToSet, callback) => {
console.log("insert into article set ? ", dataToSet,'pankaj')
dbConfig.getDB().query("insert into article set ? ", dataToSet, callback);
}
let deleteArticle = (criteria, callback) => {
let conditions = "";
criteria.id ? conditions += ` and id = '${criteria.id}'` : true;
console.log(`delete from article where 1 ${conditions}`);
dbConfig.getDB().query(`delete from article where 1 ${conditions}`, callback);
}
let updateArticle = (criteria,dataToSet,callback) => {
let conditions = "";
let setData = "";
criteria.id ? conditions += ` and id = '${criteria.id}'` : true;
dataToSet.category ? setData += `category = '${dataToSet.category}'` : true;
dataToSet.title ? setData += `, title = '${dataToSet.title}'` : true;
console.log(`UPDATE article SET ${setData} where 1 ${conditions}`);
dbConfig.getDB().query(`UPDATE article SET ${setData} where 1 ${conditions}`, callback);
}
module.exports = {
getArticle : getArticle,
createArticle : createArticle,
deleteArticle : deleteArticle,
updateArticle : updateArticle,
getArticleDetail : getArticleDetail
}
Now one create Services folder and add a file article.js for all the logic of API
let async = require('async'),
parseString = require('xml2js').parseString;
let util = require('../Utilities/util'),
articleDAO = require('../DAO/articleDAO');
//config = require("../Utilities/config").config;
/**API to create the atricle */
let createArticle = (data, callback) => {
async.auto({
article: (cb) => {
var dataToSet = {
"category":data.category?data.category:'',
"title":data.title,
}
console.log(dataToSet);
articleDAO.createArticle(dataToSet, (err, dbData) => {
if (err) {
cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.SERVER_BUSY });
return;
}
cb(null, { "statusCode": util.statusCode.OK, "statusMessage": util.statusMessage.DATA_UPDATED,"result":dataToSet });
});
}
//]
}, (err, response) => {
callback(response.article);
});
}
/**API to update the article */
let updateArticle = (data,callback) => {
async.auto({
articleUpdate :(cb) =>{
if (!data.id) {
cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.PARAMS_MISSING })
return;
}
console.log('phase 1');
var criteria = {
id : data.id,
}
var dataToSet={
"category": data.category,
"title":data.title,
}
console.log(criteria,'test',dataToSet);
articleDAO.updateArticle(criteria, dataToSet, (err, dbData)=>{
if(err){
cb(null,{"statusCode":util.statusCode.FOUR_ZERO_ONE,"statusMessage":util.statusMessage.SERVER_BUSY});
return;
}
else{
cb(null, { "statusCode": util.statusCode.OK, "statusMessage": util.statusMessage.DATA_UPDATED,"result":dataToSet });
}
});
}
}, (err,response) => {
callback(response.articleUpdate);
});
}
/**API to delete the subject */
let deleteArticle = (data,callback) => {
console.log(data,'data to set')
async.auto({
removeArticle :(cb) =>{
if (!data.id) {
cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.PARAMS_MISSING })
return;
}
var criteria = {
id : data.id,
}
articleDAO.deleteArticle(criteria,(err,dbData) => {
if (err) {
console.log(err);
cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.SERVER_BUSY });
return;
}
cb(null, { "statusCode": util.statusCode.OK, "statusMessage": util.statusMessage.DELETE_DATA });
});
}
}, (err,response) => {
callback(response.removeArticle);
});
}
/***API to get the article list */
let getArticle = (data, callback) => {
async.auto({
article: (cb) => {
articleDAO.getArticle({},(err, data) => {
if (err) {
cb(null, {"errorCode": util.statusCode.INTERNAL_SERVER_ERROR,"statusMessage": util.statusMessage.SERVER_BUSY});
return;
}
cb(null, data);
return;
});
}
}, (err, response) => {
callback(response.article);
})
}
/***API to get the article detail by id */
let getArticleById = (data, callback) => {
async.auto({
article: (cb) => {
let criteria = {
"id":data.id
}
articleDAO.getArticleDetail(criteria,(err, data) => {
if (err) {
console.log(err,'error----');
cb(null, {"errorCode": util.statusCode.INTERNAL_SERVER_ERROR,"statusMessage": util.statusMessage.SERVER_BUSY});
return;
}
cb(null, data[0]);
return;
});
}
}, (err, response) => {
callback(response.article);
})
}
module.exports = {
createArticle : createArticle,
updateArticle : updateArticle,
deleteArticle : deleteArticle,
getArticle : getArticle,
getArticleById : getArticleById
};
3. Create angular component for performing CRUD task of article
ng g component article
Above command will generate all required files for build article component and also automatically added this component to app.module.ts.
create src/app/article/article.component.css (0 bytes)
create src/app/article/article.component.html (23 bytes)
create src/app/article/article.component.spec.ts (614 bytes)
create src/app/article/article.component.ts (321 bytes)
update src/app/app.module.ts (390 bytes)
Now we need to add HttpClientModule to app.module.ts. Open and edit src/app/app.module.ts then add this import. And add it to @NgModule imports after BrowserModule. Now our app.module.ts will have following code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ArticleComponent } from './article.component';
import { ArticleService } from './article.service';
@NgModule({
imports: [
BrowserModule,
HttpModule,
ReactiveFormsModule
],
declarations: [
AppComponent,
ArticleComponent
],
providers: [
ArticleService
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
Now create a service file where we will make all the request to the server for CRUD operation. Command for creating service is ng g service artcle , for now I have just created a file named it article.service.ts. Let's have a look in the code inside this file.
import { Injectable } from '@angular/core';
import { Http, Response, Headers, URLSearchParams, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Article } from './article';
@Injectable()
export class ArticleService {
//URL for CRUD operations
articleUrl = "http://localhost:3000/article";
//Create constructor to get Http instance
constructor(private http:Http) {
}
//Fetch all articles
getAllArticles(): Observable<Article[]> {
return this.http.get(this.articleUrl+"/get-article")
.map(this.extractData)
.catch(this.handleError);
}
//Create article
createArticle(article: Article):Observable<number> {
let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: cpHeaders });
return this.http.post(this.articleUrl+"/create-article", article, options)
.map(success => success.status)
.catch(this.handleError);
}
//Fetch article by id
getArticleById(articleId: string): Observable<Article> {
let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: cpHeaders });
console.log(this.articleUrl +"/get-article-by-id?id="+ articleId);
return this.http.get(this.articleUrl +"/get-article-by-id?id="+ articleId)
.map(this.extractData)
.catch(this.handleError);
}
//Update article
updateArticle(article: Article):Observable<number> {
let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: cpHeaders });
return this.http.put(this.articleUrl +"/update-article", article, options)
.map(success => success.status)
.catch(this.handleError);
}
//Delete article
deleteArticleById(articleId: string): Observable<number> {
let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: cpHeaders });
return this.http.delete(this.articleUrl +"/delete-article?id="+ articleId)
.map(success => success.status)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body;
}
private handleError (error: Response | any) {
console.error(error.message || error);
return Observable.throw(error.status);
}
}
In the above file we have made all the http request for the CRUD operation. Observables of rxjs library has been used to handle the data fetching from http request.
Now let's move to the next file, article.component.ts. Here we have all the login part of the app. Let's have a look code inside this file:
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ArticleService } from './article.service';
import { Article } from './article';
@Component({
selector: 'app-article',
templateUrl: './article.component.html',
styleUrls: ['./article.component.css']
})
export class ArticleComponent implements OnInit {
//Component properties
allArticles: Article[];
statusCode: number;
requestProcessing = false;
articleIdToUpdate = null;
processValidation = false;
//Create form
articleForm = new FormGroup({
title: new FormControl('', Validators.required),
category: new FormControl('', Validators.required)
});
//Create constructor to get service instance
constructor(private articleService: ArticleService) {
}
//Create ngOnInit() and and load articles
ngOnInit(): void {
this.getAllArticles();
}
//Fetch all articles
getAllArticles() {
this.articleService.getAllArticles()
.subscribe(
data => this.allArticles = data,
errorCode => this.statusCode = errorCode);
}
//Handle create and update article
onArticleFormSubmit() {
this.processValidation = true;
if (this.articleForm.invalid) {
return; //Validation failed, exit from method.
}
//Form is valid, now perform create or update
this.preProcessConfigurations();
let article = this.articleForm.value;
if (this.articleIdToUpdate === null) {
//Generate article id then create article
this.articleService.getAllArticles()
.subscribe(articles => {
//Generate article id
let maxIndex = articles.length - 1;
let articleWithMaxIndex = articles[maxIndex];
let articleId = articleWithMaxIndex.id + 1;
article.id = articleId;
console.log(article,'this is form data---');
//Create article
this.articleService.createArticle(article)
.subscribe(successCode => {
this.statusCode = successCode;
this.getAllArticles();
this.backToCreateArticle();
},
errorCode => this.statusCode = errorCode
);
});
} else {
//Handle update article
article.id = this.articleIdToUpdate;
this.articleService.updateArticle(article)
.subscribe(successCode => {
this.statusCode = successCode;
this.getAllArticles();
this.backToCreateArticle();
},
errorCode => this.statusCode = errorCode);
}
}
//Load article by id to edit
loadArticleToEdit(articleId: string) {
this.preProcessConfigurations();
this.articleService.getArticleById(articleId)
.subscribe(article => {
console.log(article,'poiuytre');
this.articleIdToUpdate = article.id;
this.articleForm.setValue({ title: article.title, category: article.category });
this.processValidation = true;
this.requestProcessing = false;
},
errorCode => this.statusCode = errorCode);
}
//Delete article
deleteArticle(articleId: string) {
this.preProcessConfigurations();
this.articleService.deleteArticleById(articleId)
.subscribe(successCode => {
//this.statusCode = successCode;
//Expecting success code 204 from server
this.statusCode = 204;
this.getAllArticles();
this.backToCreateArticle();
},
errorCode => this.statusCode = errorCode);
}
//Perform preliminary processing configurations
preProcessConfigurations() {
this.statusCode = null;
this.requestProcessing = true;
}
//Go back from update to create
backToCreateArticle() {
this.articleIdToUpdate = null;
this.articleForm.reset();
this.processValidation = false;
}
}
Now we have to show the task over browser, So lets have a look inside article.component.html file.
<h1 class="text-center">Angular 7 CRUD Demo App</h1>
<h3 class="text-center" *ngIf="articleIdToUpdate; else create">
Update Article for Id: {{articleIdToUpdate}}
</h3>
<ng-template #create>
<h3 class="text-center"> Create New Article </h3>
</ng-template>
<div>
<form [formGroup]="articleForm" (ngSubmit)="onArticleFormSubmit()">
<table class="table-striped" style="margin:0 auto;">
<tr><td>Enter Title</td><td><input formControlName="title">
<label *ngIf="articleForm.get('title').invalid && processValidation" [ngClass] = "'error'"> Title is required. </label>
</td></tr>
<tr><td>Enter Category</td><td><input formControlName="category">
<label *ngIf="articleForm.get('category').invalid && processValidation" [ngClass] = "'error'"> Category is required. </label>
</td></tr>
<tr><td colspan="2">
<button class="btn btn-default" *ngIf="!articleIdToUpdate">CREATE</button>
<button class="btn btn-default" *ngIf="articleIdToUpdate">UPDATE</button>
<button (click)="backToCreateArticle()" *ngIf="articleIdToUpdate">Go Back</button>
</td></tr>
</table>
</form>
<br/>
<div class="text-center" *ngIf="statusCode; else processing">
<div *ngIf="statusCode === 201" [ngClass] = "'success'">
Article added successfully.
</div>
<div *ngIf="statusCode === 409" [ngClass] = "'success'">
Article already exists.
</div>
<div *ngIf="statusCode === 200" [ngClass] = "'success'">
Article updated successfully.
</div>
<div *ngIf="statusCode === 204" [ngClass] = "'success'">
Article deleted successfully.
</div>
<div *ngIf="statusCode === 500" [ngClass] = "'error'">
Internal Server Error.
</div>
</div>
<ng-template #processing>
<img *ngIf="requestProcessing" src="assets/images/loading.gif">
</ng-template>
</div>
<h3 class="text-center">Article List</h3>
<table class="table-striped" style="margin:0 auto;" *ngIf="allArticles">
<tr><th> Id</th> <th>Title</th><th>Category</th><th></th><th></th></tr>
<tr *ngFor="let article of allArticles" >
<td>{{article.id}}</td> <td>{{article.title}}</td> <td>{{article.category}}</td>
<td><button class="btn btn-default" type="button" (click)="loadArticleToEdit(article.id)">Edit</button> </td>
<td><button class="btn btn-default" type="button" (click)="deleteArticle(article.id)">Delete</button></td>
</tr>
</table>
Now since I have created server and client two separate folder for nodejs and angular task. So will run both the apps with npm start over two tabs of terminal.
On the browser, over link http://localhost:4200. App will look like below
That’s all for now. Thank you for reading and I hope this post will be very helpful for creating CRUD operations with angular7,node.js & mysql.
================================================
Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter
Angular 8 Forms Tutorial - Reactive Forms Validation Example
In this article, you''ll see a quick example of how to setup form validation in Angular 8 using Reactive Forms.
In this article, you''ll see a quick example of how to setup form validation in Angular 8 using Reactive Forms.
The example is a simple registration form with pretty standard fields for title, first name, last name, email, password, confirm password and an accept Ts & Cs checkbox. All fields are required including the checkbox, the email field must be a valid email address and the password field must have a min length of 6. There's also a custom validator called MustMatch which is used to validate that the confirm password and password fields match.
I've setup the form to validate on submit rather than as soon as each field is changed, this is implemented with a submitted property in the app component that is set to true when the form is submitted for the first time, and reset to false if the cancel button is clicked.
Styling of the example is all done with Bootstrap 4.3 CSS.
See on StackBlitz at https://stackblitz.com/edit/angular-8-reactive-form-validation
Reactive Forms Validation App ComponentThe app component defines the form fields and validators for our registration form using an Angular FormBuilder to create an instance of a FormGroup that is stored in the registerForm property. The registerForm is then bound to the form in the app template below using the [formGroup] directive.
I also added a getter f as a convenience property to make it easier to access form controls from the template. So for example you can access the confirmPassword field in the template using f.confirmPassword instead of registerForm.controls.confirmPassword.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
// import custom validator to validate that password and confirm password fields match
import { MustMatch } from './_helpers/must-match.validator';
@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
registerForm: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.registerForm = this.formBuilder.group({
title: ['', Validators.required],
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
confirmPassword: ['', Validators.required],
acceptTerms: [false, Validators.requiredTrue]
}, {
validator: MustMatch('password', 'confirmPassword')
});
}
// convenience getter for easy access to form fields
get f() { return this.registerForm.controls; }
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.registerForm.invalid) {
return;
}
// display form values on success
alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.registerForm.value, null, 4));
}
onReset() {
this.submitted = false;
this.registerForm.reset();
}
}
The app component template contains all the html markup for displaying the example registration form in your browser. The form element uses the [formGroup] directive to bind to the registerForm FormGroup in the app component above.
The form binds the form submit event to the onSubmit() handler in the app component using the Angular event binding (ngSubmit)="onSubmit()". Validation messages are displayed only after the user attempts to submit the form for the first time, this is controlled with the submitted property of the app component.
The cancel button click event is bound to the onReset() handler in the app component using the Angular event binding (click)="onReset()".
##### Angular 8 Reactive Form Validation
Title
Mr
Mrs
Miss
Ms
Title is required
First Name
First Name is required
Last Name
Last Name is required
Email
Email is required
Email must be a valid email address
Password
Password is required
Password must be at least 6 characters
Confirm Password
Confirm Password is required
Passwords must match
Accept Terms & Conditions
Accept Ts & Cs is required
Register
Cancel
The custom MustMatch validator is used in this example to validate that both of the password fields - password and confirmPassword - are matching. However it can be used to validate that any pair of fields is matching (e.g. email and confirm email fields).
It works slightly differently than a typical custom validator because I'm setting the error on the second field instead of returning it to be set on the formGroup. I did it this way because I think it makes the template a bit cleaner and more intuitive, the mustMatch validation error is displayed below the confirmPassword field so I think it makes sense that the error is attached the the confirmPassword form control.
import { FormGroup } from '@angular/forms';
// custom validator to check that two fields match
export function MustMatch(controlName: string, matchingControlName: string) {
return (formGroup: FormGroup) => {
const control = formGroup.controls[controlName];
const matchingControl = formGroup.controls[matchingControlName];
if (matchingControl.errors && !matchingControl.errors.mustMatch) {
// return if another validator has already found an error on the matchingControl
return;
}
// set error on matchingControl if validation fails
if (control.value !== matchingControl.value) {
matchingControl.setErrors({ mustMatch: true });
} else {
matchingControl.setErrors(null);
}
}
}
There isn't much going on in the app module other than the standard stuff, the main thing you need to remember for using reactive forms in Angular is to import the ReactiveFormsModule from '@angular/forms' and include it in the imports array of the @NgModule decorator.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular 8 Pagination Example and Tutorial
Pagination is the best way to show huge number of records in series for any application. Also showing/fetching thousands of record at one go will affect the performance of the application.
Pagination is the best way to show huge number of records in series for any application. Also showing/fetching thousands of record at one go will affect the performance of the application.
For example, when you search something that returns a large number of records which cannot be shown on a single web page therefore, those records are part into number of pages that can be accessed through links via pagination structure.
So today in this demo we will discuss the simple pagination in Angular 8.
Step 1: Create a basic app with angular cling new angular8-simple-pagination-example
By typing the above command we will see a basic angular app created on the current folder. So move to the created folder by typing **cd angular8-simple-pagination-example/. **You can check the newly created app by typing http://localhost:4200 on the browser.
Step 2: install ngx-pagination pagination dependency from terminalSo run the below command over terminal
npm install ngx-pagination --save
Step 3: Create dummy records for pagination
Now we will create static data to show the pagination. So lets have a look on the code under file **app.component.ts **
import { Component } from '@angular/core';
import {NgxPaginationModule} from 'ngx-pagination';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'simple pagination demo';
collection = [];
constructor(){
for(let i=1;i<=100;i++){
let Obj = {'name': `Employee Name ${i}`,'code': `EMP00 ${i}`}
this.collection.push(Obj);
}
}
}
In the above file, we can see that inside constructor we have created a loop for created dummy record for 100 employees having employee name & code for showing pagination.
Step 4: Import dependency in app.module.tsNow let's have a look on the code inside **app.module.ts **where the ngx-pagination module has been imported
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxPaginationModule } from 'ngx-pagination';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxPaginationModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Now one last step needed to do is, add the below code anywhere inside app.component.html
* Emp Name | Emp code
{{item.name}} | {{item.code}}
Now, we are done with all the needed steps for the pagination in our angular application.
Step 6: Run the app
Run the app over the terminal with npm start and check the app after typing the url http://localhost:4200/.** **A page will open like below:
By following these easy steps we can easily achieve the client side pagination in Angular 8 application. If you want to impliment server side pagination in angular8 Server Side Pagination in Angular Example and Tutorial . You can also find other demos of Angular Sample Application here to start working on enterprise level application. Click here to view more about the pagination package over npm.
Create Simple Login Page using Angular 8 and HTTP Authentication
In this article, you'll learn how to setup a simple login page using Angular 8 and Basic HTTP authentication
In this article, you'll learn how to setup a simple login page using Angular 8 and Basic HTTP authentication
Tutorial built with Angular 8.0.2 and the Angular CLI
Angular CLI was used to generate the base project structure with the ng new command, the CLI is also used to build and serve the application. For more info about the Angular CLI see https://angular.io/cli.
Styling of the example app is all done with Bootstrap 4.3, for more info about Bootstrap see https://getbootstrap.com/docs/4.3/getting-started/introduction/.
Running the Angular 8 Basic Authentication Tutorial Example Locally- Install NodeJS and NPM from https://nodejs.org/en/download/.
- Download or clone the tutorial project source code from https://github.com/cornflourblue/angular-8-basic-authentication-example
- Install all required npm packages by running
npm installfrom the command line in the project root folder (where the package.json is located). - Start the application by running
npm startfrom the - command line in the project root folder, this will build the application
- and automatically launch it in the browser on the URL
- http://localhost:4200.
NOTE: You can also run the app directly using the Angular CLI command ng serve --open. To do this first install the Angular CLI globally on your system with the command npm install -g @angular/cli.
The Angular 8 basic authentication example app uses a fake / mock backend by default so it can run in the browser without a real api, to switch to a real backend api you just have to remove or comment out the line below the comment // provider used to create fake backend located in the /src/app/app.module.ts file.
The app and code structure of the tutorial mostly follows the best practice recommendations in the official Angular Style Guide, with a few of my own tweaks here and there.
Each feature has it's own folder (home & login), other shared/common code such as services, models, helpers etc are placed in folders prefixed with an underscore _ to easily differentiate them and group them together at the top of the folder structure.
The index.ts files in each folder are barrel files that group the exported modules from a folder together so they can be imported using the folder path instead of the full module path and to enable importing multiple modules in a single import (e.g. import { AuthenticationService, UserService } from '../_services').
Path aliases @app and @environments have been configured in tsconfig.json that map to the /src/app and /src/environments directories. This allows imports to be relative to the app and environments folders by prefixing import paths with aliases instead of having to use long relative paths (e.g. import MyComponent from '../../../MyComponent').
Here are the main project files that contain the application logic, I left out some files that were generated by Angular CLI ng new command that I didn't change.
- src
- app
- _helpers
- auth.guard.ts
- basic-auth.interceptor.ts
- error.interceptor.ts
- fake-backend.ts
- index.ts
- _models
- user.ts
- index.ts
- _services
- authentication.service.ts
- user.service.ts
- index.ts
- home
- home.component.html
- home.component.ts
- index.ts
- login
- login.component.html
- login.component.ts
- index.ts
- app.component.html
- app.component.ts
- app.module.ts
- app.routing.ts
- environments
- environment.prod.ts
- environment.ts
- index.html
- main.ts
- polyfills.ts
- styles.less
- package.json
- tsconfig.json
Path: /src/app/_helpers/auth.guard.ts
The auth guard is an angular route guard that's used to prevent unauthenticated users from accessing restricted routes, it does this by implementing the CanActivate interface which allows the guard to decide if a route can be activated with the canActivate() method. If the method returns true the route is activated (allowed to proceed), otherwise if the method returns false the route is blocked.
The auth guard uses the authentication service to check if the user is logged in, if they are logged in it returns true from the canActivate() method, otherwise it returns false and redirects the user to the login page.
Angular route guards are attached to routes in the router config, this auth guard is used in app.routing.ts to protect the home page route.
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthenticationService } from '@app/_services';
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(
private router: Router,
private authenticationService: AuthenticationService
) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
const currentUser = this.authenticationService.currentUserValue;
if (currentUser) {
// logged in so return true
return true;
}
// not logged in so redirect to login page with the return url
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return false;
}
}
Path: /src/app/_helpers/basic-auth.interceptor.ts
The Basic Authentication Interceptor intercepts http requests from the application to add basic authentication credentials to the Authorization header if the user is logged in.
It's implemented using the HttpInterceptor class included in the HttpClientModule, by extending the HttpInterceptor class you can create a custom interceptor to modify http requests before they get sent to the server.
Http interceptors are added to the request pipeline in the providers section of the _app.module.ts_ file.
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthenticationService } from '@app/_services';
@Injectable()
export class BasicAuthInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService) { }
intercept(request: HttpRequest, next: HttpHandler): Observable> {
// add authorization header with basic auth credentials if available
const currentUser = this.authenticationService.currentUserValue;
if (currentUser && currentUser.authdata) {
request = request.clone({
setHeaders: {
Authorization: `Basic ${currentUser.authdata}`
}
});
}
return next.handle(request);
}
}
Path: /src/app/_helpers/error.interceptor.ts
The Error Interceptor intercepts http responses from the api to check if there were any errors. If there is a 401 Unauthorized response the user is automatically logged out of the application, all other errors are re-thrown up to the calling service so an alert with the error can be displayed on the screen.
It's implemented using the HttpInterceptor class included in the HttpClientModule, by extending the HttpInterceptor class you can create a custom interceptor to catch all error responses from the server in a single location.
Http interceptors are added to the request pipeline in the providers section of the app.module.ts file.
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthenticationService } from '@app/_services';
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService) { }
intercept(request: HttpRequest, next: HttpHandler): Observable> {
return next.handle(request).pipe(catchError(err => {
if (err.status === 401) {
// auto logout if 401 response returned from api
this.authenticationService.logout();
location.reload(true);
}
const error = err.error.message || err.statusText;
return throwError(error);
}))
}
}
Path: /src/app/_helpers/fake-backend.ts
In order to run and test the Angular application without a real backend API, the example uses a fake backend that intercepts the HTTP requests from the Angular app and send back "fake" responses. This is done by a class that implements the Angular HttpInterceptor interface, for more information on Angular HTTP Interceptors see https://angular.io/api/common/http/HttpInterceptor
The fake backend contains a handleRoute function that checks if the request matches one of the faked routes in the switch statement, at the moment this includes POST requests to the /users/authenticate route for handling authentication, and GET requests to the /users route for getting all users.
Requests to the authenticate route are handled by the authenticate() function which checks the username and password against an array of hardcoded users. If the username and password are correct then an ok response is returned with the user details, otherwise an error response is returned.
Requests to the get users route are handled by the getUsers() function which checks if the user is logged in by calling the new isLoggedIn() helper function. If the user is logged in an ok() response with the whole users array is returned, otherwise a 401 Unauthorized response is returned by calling the new unauthorized() helper function.
If the request doesn't match any of the faked routes it is passed through as a real HTTP request to the backend API.
import { Injectable } from '@angular/core';
import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators';
import { User } from '@app/_models';
const users: User[] = [{ id: 1, username: 'test', password: 'test', firstName: 'Test', lastName: 'User' }];
@Injectable()
export class FakeBackendInterceptor implements HttpInterceptor {
intercept(request: HttpRequest, next: HttpHandler): Observable> {
const { url, method, headers, body } = request;
// wrap in delayed observable to simulate server api call
return of(null)
.pipe(mergeMap(handleRoute))
.pipe(materialize()) // call materialize and dematerialize to ensure delay even if an error is thrown (https://github.com/Reactive-Extensions/RxJS/issues/648)
.pipe(delay(500))
.pipe(dematerialize());
function handleRoute() {
switch (true) {
case url.endsWith('/users/authenticate') && method === 'POST':
return authenticate();
case url.endsWith('/users') && method === 'GET':
return getUsers();
default:
// pass through any requests not handled above
return next.handle(request);
}
}
// route functions
function authenticate() {
const { username, password } = body;
const user = users.find(x => x.username === username && x.password === password);
if (!user) return error('Username or password is incorrect');
return ok({
id: user.id,
username: user.username,
firstName: user.firstName,
lastName: user.lastName
})
}
function getUsers() {
if (!isLoggedIn()) return unauthorized();
return ok(users);
}
// helper functions
function ok(body?) {
return of(new HttpResponse({ status: 200, body }))
}
function error(message) {
return throwError({ error: { message } });
}
function unauthorized() {
return throwError({ status: 401, error: { message: 'Unauthorised' } });
}
function isLoggedIn() {
return headers.get('Authorization') === `Basic ${window.btoa('test:test')}`;
}
}
}
export let fakeBackendProvider = {
// use fake backend in place of Http service for backend-less development
provide: HTTP_INTERCEPTORS,
useClass: FakeBackendInterceptor,
multi: true
};
Path: /src/app/_models/user.ts
The user model is a small class that defines the properties of a user.
export class User {
id: number;
username: string;
password: string;
firstName: string;
lastName: string;
authdata?: string;
}
Path: /src/app/_services/authentication.service.ts
The authentication service is used to login & logout of the Angular app, it notifies other components when the user logs in & out, and allows access the currently logged in user.
RxJS Subjects and Observables are used to store the current user object and notify other components when the user logs in and out of the app. Angular components can subscribe() to the public currentUser: Observable property to be notified of changes, and notifications are sent when the this.currentUserSubject.next() method is called in the login() and logout() methods, passing the argument to each subscriber. The RxJS BehaviorSubject is a special type of Subject that keeps hold of the current value and emits it to any new subscribers as soon as they subscribe, while regular Subjects don't store the current value and only emit values that are published after a subscription is created.
The login() method sends the user credentials to the API via an HTTP POST request for authentication. If successful the user's basic authentication data (base64 encoded username and password) is added to the user object and stored in localStorage to keep the user logged in between page refreshes. The user object is then published to all subscribers with the call to this.currentUserSubject.next(user);.
The basic auth data is used by the basic authentication interceptor above to set the authorization header of http requests made to secure api endpoints.
The constructor() of the service initialises the currentUserSubject with the currentUser object from localStorage which enables the user to stay logged in between page refreshes or after the browser is closed. The public currentUser property is then set to this.currentUserSubject.asObservable(); which allows other components to subscribe to the currentUser Observable but doesn't allow them to publish to the currentUserSubject, this is so logging in and out of the app can only be done via the authentication service.
The currentUserValue getter allows other components an easy way to get the value of the currently logged in user without having to subscribe to the currentUser Observable.
The logout() method removes the current user object from local storage and publishes null to the currentUserSubject to notify all subscribers that the user has logged out.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from '@environments/environment';
import { User } from '@app/_models';
@Injectable({ providedIn: 'root' })
export class AuthenticationService {
private currentUserSubject: BehaviorSubject;
public currentUser: Observable;
constructor(private http: HttpClient) {
this.currentUserSubject = new BehaviorSubject(JSON.parse(localStorage.getItem('currentUser')));
this.currentUser = this.currentUserSubject.asObservable();
}
public get currentUserValue(): User {
return this.currentUserSubject.value;
}
login(username: string, password: string) {
return this.http.post(`${environment.apiUrl}/users/authenticate`, { username, password })
.pipe(map(user => {
// store user details and basic auth credentials in local storage to keep user logged in between page refreshes
user.authdata = window.btoa(username + ':' + password);
localStorage.setItem('currentUser', JSON.stringify(user));
this.currentUserSubject.next(user);
return user;
}));
}
logout() {
// remove user from local storage to log user out
localStorage.removeItem('currentUser');
this.currentUserSubject.next(null);
}
}
Path: /src/app/_services/user.service.ts
The user service contains a method for getting all users from the api, I included it to demonstrate accessing a secure api endpoint with the http authorization header set after logging in to the application, the auth header is automatically set with basic authentication credentials by the basic authentication interceptor. The secure endpoint in the example is a fake one implemented in the fake backend provider.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '@environments/environment';
import { User } from '@app/_models';
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private http: HttpClient) { }
getAll() {
return this.http.get(`${environment.apiUrl}/users`);
}
}
Path: /src/app/home/home.component.html
The home component template contains html and angular 8 template syntax for displaying a simple welcome message and a list of users from a secure api endpoint.
#### You're logged in with Angular 8 & Basic HTTP Authentication!!
###### Users from secure api end point
{{user.firstName}} {{user.lastName}}
Path: /src/app/home/home.component.ts
The home component defines an angular 8 component that gets all users from the user service and makes them available to the template via a users array property.
import { Component } from '@angular/core';
import { first } from 'rxjs/operators';
import { User } from '@app/_models';
import { UserService } from '@app/_services';
@Component({ templateUrl: 'home.component.html' })
export class HomeComponent {
loading = false;
users: User[];
constructor(private userService: UserService) { }
ngOnInit() {
this.loading = true;
this.userService.getAll().pipe(first()).subscribe(users => {
this.loading = false;
this.users = users;
});
}
}
Path: /src/app/login/login.component.html
The login component template contains a login form with username and password fields. It displays validation messages for invalid fields when the submit button is clicked. The form submit event is bound to the onSubmit() method of the login component.
Username: test
Password: test
#### Angular 8 Basic Auth Login Example
Username
Username is required
Password
Password is required
Login
{{error}}
Path: /src/app/login/login.component.ts
The login component uses the authentication service to login to the application. If the user is already logged in they are automatically redirected to the home page.
The loginForm: FormGroup object defines the form controls and validators, and is used to access data entered into the form. The FormGroup is part of the Angular Reactive Forms module and is bound to the login template above with the [formGroup]="loginForm" directive.
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { AuthenticationService } from '@app/_services';
@Component({ templateUrl: 'login.component.html' })
export class LoginComponent implements OnInit {
loginForm: FormGroup;
loading = false;
submitted = false;
returnUrl: string;
error = '';
constructor(
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private authenticationService: AuthenticationService
) {
// redirect to home if already logged in
if (this.authenticationService.currentUserValue) {
this.router.navigate(['/']);
}
}
ngOnInit() {
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}
// convenience getter for easy access to form fields
get f() { return this.loginForm.controls; }
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.loginForm.invalid) {
return;
}
this.loading = true;
this.authenticationService.login(this.f.username.value, this.f.password.value)
.pipe(first())
.subscribe(
data => {
this.router.navigate([this.returnUrl]);
},
error => {
this.error = error;
this.loading = false;
});
}
}
Path: /src/app/app.component.html
The app component template is the root component template of the application, it contains the main nav bar which is only displayed for authenticated users, and a router-outlet directive for displaying the contents of each view based on the current route / path.
Home
Logout
Path: /src/app/app.component.ts
The app component is the root component of the application, it defines the root tag of the app as `` with the selector property of the @Component() decorator.
It subscribes to the currentUser observable in the authentication service so it can reactively show/hide the main navigation bar when the user logs in/out of the application. I didn't worry about unsubscribing from the observable here because it's the root component of the application, the only time the component will be destroyed is when the application is closed which would destroy any subscriptions as well.
The app component contains a logout() method which is called from the logout link in the main nav bar above to log the user out and redirect them to the login page.
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthenticationService } from './_services';
import { User } from './_models';
@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent {
currentUser: User;
constructor(
private router: Router,
private authenticationService: AuthenticationService
) {
this.authenticationService.currentUser.subscribe(x => this.currentUser = x);
}
logout() {
this.authenticationService.logout();
this.router.navigate(['/login']);
}
}
Path: /src/app/app.module.ts
The app module defines the root module of the application along with metadata about the module. For more info about angular 8 modules check out this page on the official docs site.
This is where the fake backend provider is added to the application, to switch to a real backend simply remove the providers located below the comment // provider used to create fake backend.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
// used to create fake backend
import { fakeBackendProvider } from './_helpers';
import { AppComponent } from './app.component';
import { appRoutingModule } from './app.routing';
import { BasicAuthInterceptor, ErrorInterceptor } from './_helpers';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
HttpClientModule,
appRoutingModule
],
declarations: [
AppComponent,
HomeComponent,
LoginComponent
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: BasicAuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
// provider used to create fake backend
fakeBackendProvider
],
bootstrap: [AppComponent]
})
export class AppModule { }
Path: /src/app/app.routing.ts
Routing for the Angular app is configured as an array of Routes, each component is mapped to a path so the Angular Router knows which component to display based on the URL in the browser address bar. The home route is secured by passing the AuthGuard to the canActivate property of the route.
The Routes array is passed to the RouterModule.forRoot() method which creates a routing module with all of the app routes configured, and also includes all of the Angular Router providers and directives such as the `` directive. For more information on Angular Routing and Navigation see https://angular.io/guide/router.
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { AuthGuard } from './_helpers';
const routes: Routes = [
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const appRoutingModule = RouterModule.forRoot(routes);
Path: /src/environments/environment.prod.ts
The production environment config contains variables required to run the application in production. This enables you to build the application with a different configuration for each different environment (e.g. production & development) without updating the app code.
When you build the application for production with the command ng build --prod, the output environment.ts is replaced with environment.prod.ts.
export const environment = {
production: true,
apiUrl: 'http://localhost:4000'
};
Path: /src/environments/environment.ts
The development environment config contains variables required to run the application in development.
Environment config is accessed by importing the environment object into any Angular service of component with the line import { environment } from '@environments/environment' and accessing properties on the environment object, see the user service for an example.
export const environment = {
production: false,
apiUrl: 'http://localhost:4000'
};
Path: /src/index.html
The main index.html file is the initial page loaded by the browser that kicks everything off. The Angular CLI (with Webpack under the hood) bundles all of the compiled javascript files together and injects them into the body of the index.html page so the scripts can be loaded and executed by the browser.
Angular 8 - Basic HTTP Authentication Tutorial & Example
Loading...
Path: /src/main.ts
The main file is the entry point used by angular to launch and bootstrap the application.
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Path: /src/polyfills.ts
Some features used by Angular 8 are not yet supported natively by all major browsers, polyfills are used to add support for features where necessary so your Angular 8 application works across all major browsers.
This file is generated by the Angular CLI when creating a new project with the ng new command, I've excluded the comments in the file for brevity.
import 'zone.js/dist/zone';
Path: /src/styles.less
The global styles file contains LESS/CSS styles that are applied globally throughout the application.
/* You can add global styles to this file, and also import other style files */
a { cursor: pointer }
Path: /package.json
The package.json file contains project configuration information including package dependencies which get installed when you run npm install. Full documentation is available on the npm docs website.
{
"name": "angular-8-basic-authentication-example",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --open",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.0.1",
"@angular/common": "~8.0.1",
"@angular/compiler": "~8.0.1",
"@angular/core": "~8.0.1",
"@angular/forms": "~8.0.1",
"@angular/platform-browser": "~8.0.1",
"@angular/platform-browser-dynamic": "~8.0.1",
"@angular/router": "~8.0.1",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~8.0.3",
"@angular/compiler-cli": "~8.0.1",
"@angular/language-service": "~8.0.1",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
}
}
Path: /tsconfig.json
The tsconfig.json file configures how the TypeScript compiler will convert TypeScript into JavaScript that is understood by the browser. More information is available on the TypeScript docs.
Most of the file is unchanged from when it was generated by the Angular CLI, only the paths property has been added to map @app and @environments to the /src/app and /src/environments directories. This allows imports to be relative to the app and environments folders by prefixing import paths with aliases instead of having to use long relative paths (e.g. import MyComponent from '../../../MyComponent').
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
],
"paths": {
"@app/*": ["src/app/*"],
"@environments/*": ["src/environments/*"]
}
}
}
The tutorial code is available on GitHub