In this documentation, we demonstrate how to integrate the API into an Angular application
POSTMAN DOCS
https://documenter.getpostman.com/view/24626304/2sAYBUDXqC
Output Link
https://angular-api-activity.web.app/user
Github:
https://github.com/thirdygayares/angular-api
API endpoint:
https://testsvfcb.pythonanywhere.com
Project Directory
Step 1: Setup Angular Project
https://software-engineer.thirdygayares.com/angular-create-components-modules-and-routes
Step 2: Create Components and Services
https://software-engineer.thirdygayares.com/angular-create-components-modules-and-routes
https://software-engineer.thirdygayares.com/angular-services
Step 3: Create User Model
user.ts
export interface User {
user_id?: number;
user_uuid?: string;
email?: string;
username?: string;
password?: string;
role?: string;
created_at?: string;
updated_at?: string;
}
Step 4: Set Up the API Service
user.service.ts
import {HttpClient} from "@angular/common/http";
import {User} from "../model/user";
import {Injectable} from "@angular/core";
@Injectable({
providedIn: 'root'
})
export class UserService {
private apiUrl = 'https://testsvfcb.pythonanywhere.com/users/';
constructor(private http: HttpClient) {}
getUsers() {
return this.http.get<User[]>(this.apiUrl);
}
getUserById(userUUId: string | undefined) {
return this.http.get<User>(`${this.apiUrl}/${userUUId}`);
}
createUser(user: User) {
return this.http.post<User>(this.apiUrl, user);
}
updateUser(userUUId: string | undefined, user: User) {
return this.http.put<User>(`${this.apiUrl}/${userUUId}`, user);
}
deleteUser(userUUId: string | undefined) {
return this.http.delete(`${this.apiUrl}/${userUUId}`);
}
}
Step 5: Implement User Component
user.component.ts
import {UserService} from "../../services/user.service";
import {Component, OnInit} from "@angular/core";
import {User} from "../../model/user";
import {NgForm} from "@angular/forms";
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
users: User[] = [];
selectedUser: User | null = null;
constructor(private userService: UserService) {}
ngOnInit(): void {
this.getUsers();
}
getUsers() {
this.userService.getUsers().subscribe({
next: (data) => this.users = data,
error: (err) => console.error(err)
});
}
createUser(form: NgForm) {
if (form.invalid) {
alert('Please fill out all the fields correctly.');
return;
}
const user: User = {
...form.value,
role : 'user'
};
this.userService.createUser(user).subscribe({
next: () => {
this.getUsers();
form.reset();
alert('User created successfully');
},
error: (err) => {
console.error(err);
alert('There was an error creating the user. Please check the console.');
},
});
}
updateUser(userUUId: string | undefined, user: User) {
if (!userUUId) {
alert('User ID is required');
return;
}
const newName = prompt('Enter new username:', user.username || '');
const newEmail = prompt('Enter new email:', user.email || '');
const newPassword = prompt('Enter new password:', user.password || '');
const newRole = prompt('Enter new role:', user.role || '');
if (!newName || !newEmail || !newPassword || !newRole) {
alert('Update canceled. All fields are required.');
return;
}
const updatedUser: User = {
username: newName,
email: newEmail,
password: newPassword,
role: newRole,
};
this.userService.updateUser(userUUId, updatedUser).subscribe({
next: () => {
alert('User updated successfully');
this.getUsers();
},
error: (err) => {
console.error(err);
alert('Failed to update user');
},
});
}
deleteUser(userUUId: string | undefined) {
this.userService.deleteUser(userUUId).subscribe({
next: () => this.getUsers(),
error: (err) => console.error(err)
});
}
viewUserDetails(userUUId: string | undefined) {
this.userService.getUserById(userUUId).subscribe({
next: (data) => {
const userDetails = `
Details for ${data.username}:
User ID: ${data.user_id}
User UUID: ${data.user_uuid}
Email: ${data.email}
Role: ${data.role}
Created At: ${data.created_at}
Updated At: ${data.updated_at}
`;
alert(userDetails);
},
error: (err) => console.error(err)
});
}
}
Step 6: Create HTML Template
user.component.html
<p>Manage Users</p>
<section>
<form #userForm="ngForm" (ngSubmit)="createUser(userForm)">
<input
type="text"
name="email"
ngModel
placeholder="Email"
required
#email="ngModel"
/>
<div *ngIf="email.invalid && email.touched">Email is required</div>
<input
type="text"
name="username"
ngModel
placeholder="Username"
required
#username="ngModel"
/>
<div *ngIf="username.invalid && username.touched">Username is required</div>
<input
type="password"
name="password"
ngModel
placeholder="Password"
required
minlength="6"
#password="ngModel"
/>
<div *ngIf="password.invalid && password.touched">
Password is required and must be at least 6 characters
</div>
<button type="submit" [disabled]="userForm.invalid">Create User</button>
</form>
</section>
<section>
<table border="1" class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Username</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{ user.user_uuid }}</td>
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
<td>
<button (click)="viewUserDetails(user.user_uuid)">View Details</button>
<button (click)="updateUser(user.user_uuid, { email: '[email protected]', username: 'new-username', role: 'new-role' })">Update</button>
<button (click)="deleteUser(user.user_uuid)">Delete</button>
</td>
</tr>
</tbody>
</table>
</section>
STEP 7: Add Global Style
styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
max-width: 1200px;
margin: 0 auto;
}
table {
width: 100%;
border-collapse: collapse;
padding: 20px;
margin: 20px 0px;
}
table, th, td {
border: 1px solid black;
padding: 5px;
}
table th {
background-color: #f2f2f2;
}
table td button {
background-color: #980000;
color: white;
padding: 10px 20px;
margin: 5px 10px;
}
table td button:hover {
background-color: #0c92ff;
}
nav {
display: flex;
align-items: center;
color: white;
gap: 10px;
padding: 20px 0px;
margin: 20px 0px;
}
nav a {
color: blue;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
color: darkblue;
}
form{
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
form input, form select {
padding: 10px;
border: 1px solid #ccc;
}
form button {
padding: 10px 20px;
background-color: #980000;
color: white;
border: none;
}
form button:hover {
background-color: #0c92ff;
}
output:
POSTMAN DOCS
https://documenter.getpostman.com/view/24626304/2sAYBUDXqC
Output Link
https://angular-api-activity.web.app/user
Github:
https://github.com/thirdygayares/angular-api
Output:
