{"id":23035168,"url":"https://github.com/thirdygayares/angular-api","last_synced_at":"2025-04-23T17:42:10.724Z","repository":{"id":264326390,"uuid":"893041184","full_name":"thirdygayares/angular-api","owner":"thirdygayares","description":"In this repository, we demonstrate how to integrate the API into an Angular application","archived":false,"fork":false,"pushed_at":"2024-11-25T02:39:52.000Z","size":283,"stargazers_count":0,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T02:02:20.468Z","etag":null,"topics":["angular","angular-api","angular-api-documentation","angular-httpclient"],"latest_commit_sha":null,"homepage":"https://angular-api-activity.web.app/user","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thirdygayares.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-23T11:33:37.000Z","updated_at":"2024-11-27T14:10:35.000Z","dependencies_parsed_at":"2024-11-23T13:19:24.883Z","dependency_job_id":"5015983b-7516-4487-a4c5-7fd9d7cf5a99","html_url":"https://github.com/thirdygayares/angular-api","commit_stats":null,"previous_names":["thirdygayares/angular-api"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2Fangular-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2Fangular-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2Fangular-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2Fangular-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdygayares","download_url":"https://codeload.github.com/thirdygayares/angular-api/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250482900,"owners_count":21437961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-api","angular-api-documentation","angular-httpclient"],"created_at":"2024-12-15T16:38:59.368Z","updated_at":"2025-04-23T17:42:10.701Z","avatar_url":"https://github.com/thirdygayares.png","language":"TypeScript","readme":"\n**POSTMAN DOCS**\n\n[https://documenter.getpostman.com/view/24626304/2sAYBUDXqC](https://documenter.getpostman.com/view/24626304/2sAYBUDXqC)\n\n**Output Link**\n\n[https://angular-api-activity.web.app/user](https://angular-api-activity.web.app/user)\n\n**Github:**\n\n[https://github.com/thirdygayares/angular-api](https://github.com/thirdygayares/angular-api)\n\n**API endpoint:**\n[https://testsvfcb.pythonanywhere.com](https://testsvfcb.pythonanywhere.com)\n\n**Project Directory**\n\n![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732462850551/1f393be9-d4ad-406c-a61f-962f9dea68af.png)\n\n# Step 1: Setup Angular Project\n\n[https://software-engineer.thirdygayares.com/angular-create-components-modules-and-routes](https://software-engineer.thirdygayares.com/angular-create-components-modules-and-routes)\n\n# **Step 2: Create Components and Services**\n\n[https://software-engineer.thirdygayares.com/angular-create-components-modules-and-routes](https://software-engineer.thirdygayares.com/angular-create-components-modules-and-routes)\n\n[https://software-engineer.thirdygayares.com/angular-services](https://software-engineer.thirdygayares.com/angular-services)\n\n# Step 3: Create User Model\n\n`user.ts`\n\n```typescript\nexport interface User {\n  user_id?: number;\n  user_uuid?: string;\n  email?: string;\n  username?: string;\n  password?: string;\n  role?: string;\n  created_at?: string;\n  updated_at?: string;\n}\n```\n\n# **Step 4: Set Up the API Service**\n\n`user.service.ts`\n\n```typescript\nimport {HttpClient} from \"@angular/common/http\";\nimport {User} from \"../model/user\";\nimport {Injectable} from \"@angular/core\";\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class UserService {\n  private apiUrl = 'https://testsvfcb.pythonanywhere.com/users/';\n\n  constructor(private http: HttpClient) {}\n\n  getUsers() {\n    return this.http.get\u003cUser[]\u003e(this.apiUrl);\n  }\n\n  getUserById(userUUId: string | undefined) {\n    return this.http.get\u003cUser\u003e(`${this.apiUrl}/${userUUId}`);\n  }\n\n  createUser(user: User) {\n    return this.http.post\u003cUser\u003e(this.apiUrl, user);\n  }\n\n  updateUser(userUUId: string | undefined, user: User) {\n    return this.http.put\u003cUser\u003e(`${this.apiUrl}/${userUUId}`, user);\n  }\n\n  deleteUser(userUUId: string | undefined) {\n    return this.http.delete(`${this.apiUrl}/${userUUId}`);\n  }\n}\n```\n\n# **Step 5: Implement User Component**\n\n`user.component.ts`\n\n```typescript\nimport {UserService} from \"../../services/user.service\";\nimport {Component, OnInit} from \"@angular/core\";\nimport {User} from \"../../model/user\";\nimport {NgForm} from \"@angular/forms\";\n\n@Component({\n  selector: 'app-user',\n  templateUrl: './user.component.html',\n  styleUrls: ['./user.component.css']\n})\nexport class UserComponent implements OnInit {\n  users: User[] = [];\n  selectedUser: User | null = null;\n\n  constructor(private userService: UserService) {}\n\n  ngOnInit(): void {\n    this.getUsers();\n  }\n\n  getUsers() {\n    this.userService.getUsers().subscribe({\n      next: (data) =\u003e this.users = data,\n      error: (err) =\u003e console.error(err)\n    });\n  }\n\n  createUser(form: NgForm) {\n    if (form.invalid) {\n      alert('Please fill out all the fields correctly.');\n      return;\n    }\n\n    const user: User = {\n      ...form.value,\n      role : 'user'\n    };\n\n    this.userService.createUser(user).subscribe({\n      next: () =\u003e {\n        this.getUsers();\n        form.reset();\n        alert('User created successfully');\n      },\n      error: (err) =\u003e {\n        console.error(err);\n        alert('There was an error creating the user. Please check the console.');\n      },\n    });\n  }\n\n  updateUser(userUUId: string | undefined, user: User) {\n    if (!userUUId) {\n      alert('User ID is required');\n      return;\n    }\n\n    const newName = prompt('Enter new username:', user.username || '');\n    const newEmail = prompt('Enter new email:', user.email || '');\n    const newPassword = prompt('Enter new password:', user.password || '');\n    const newRole = prompt('Enter new role:', user.role || '');\n\n    if (!newName || !newEmail || !newPassword || !newRole) {\n      alert('Update canceled. All fields are required.');\n      return;\n    }\n\n    const updatedUser: User = {\n      username: newName,\n      email: newEmail,\n      password: newPassword,\n      role: newRole,\n    };\n\n    this.userService.updateUser(userUUId, updatedUser).subscribe({\n      next: () =\u003e {\n        alert('User updated successfully');\n        this.getUsers();\n      },\n      error: (err) =\u003e {\n        console.error(err);\n        alert('Failed to update user');\n      },\n    });\n  }\n\n  deleteUser(userUUId: string | undefined) {\n    this.userService.deleteUser(userUUId).subscribe({\n      next: () =\u003e this.getUsers(),\n      error: (err) =\u003e console.error(err)\n    });\n  }\n\n  viewUserDetails(userUUId: string | undefined) {\n    this.userService.getUserById(userUUId).subscribe({\n      next: (data) =\u003e {\n        const userDetails = `\n        Details for ${data.username}:\n        User ID: ${data.user_id}\n        User UUID: ${data.user_uuid}\n        Email: ${data.email}\n        Role: ${data.role}\n        Created At: ${data.created_at}\n        Updated At: ${data.updated_at}\n\n      `;\n        alert(userDetails); // Show the details in a browser alert\n      },\n      error: (err) =\u003e console.error(err)\n    });\n  }\n\n}\n```\n\n# **Step 6: Create HTML Template**\n\n`user.component.html`\n\n```typescript\n\u003cp\u003eManage Users\u003c/p\u003e\n\u003csection\u003e\n  \u003cform #userForm=\"ngForm\" (ngSubmit)=\"createUser(userForm)\"\u003e\n    \u003cinput\n      type=\"text\"\n      name=\"email\"\n      ngModel\n      placeholder=\"Email\"\n      required\n      #email=\"ngModel\"\n    /\u003e\n    \u003cdiv *ngIf=\"email.invalid \u0026\u0026 email.touched\"\u003eEmail is required\u003c/div\u003e\n\n    \u003cinput\n      type=\"text\"\n      name=\"username\"\n      ngModel\n      placeholder=\"Username\"\n      required\n      #username=\"ngModel\"\n    /\u003e\n    \u003cdiv *ngIf=\"username.invalid \u0026\u0026 username.touched\"\u003eUsername is required\u003c/div\u003e\n\n    \u003cinput\n      type=\"password\"\n      name=\"password\"\n      ngModel\n      placeholder=\"Password\"\n      required\n      minlength=\"6\"\n      #password=\"ngModel\"\n    /\u003e\n    \u003cdiv *ngIf=\"password.invalid \u0026\u0026 password.touched\"\u003e\n      Password is required and must be at least 6 characters\n    \u003c/div\u003e\n\n    \u003cbutton type=\"submit\" [disabled]=\"userForm.invalid\"\u003eCreate User\u003c/button\u003e\n  \u003c/form\u003e\n\n\u003c/section\u003e\n\n\u003csection\u003e\n  \u003ctable border=\"1\" class=\"table table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eId\u003c/th\u003e\n      \u003cth\u003eUsername\u003c/th\u003e\n      \u003cth\u003eEmail\u003c/th\u003e\n      \u003cth\u003eActions\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr *ngFor=\"let user of users\"\u003e\n      \u003ctd\u003e{{ user.user_uuid }}\u003c/td\u003e\n      \u003ctd\u003e{{ user.username }}\u003c/td\u003e\n      \u003ctd\u003e{{ user.email }}\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cbutton (click)=\"viewUserDetails(user.user_uuid)\"\u003eView Details\u003c/button\u003e\n        \u003cbutton (click)=\"updateUser(user.user_uuid, { email: 'new-email@example.com', username: 'new-username', role: 'new-role' })\"\u003eUpdate\u003c/button\u003e\n        \u003cbutton (click)=\"deleteUser(user.user_uuid)\"\u003eDelete\u003c/button\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n\u003c/section\u003e\n```\n\n# STEP 7: Add Global Style\n\n`styles.css`\n\n```css\nbody {\n  font-family: Arial, sans-serif;\n  margin: 0;\n  padding: 0;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  padding: 20px;\n  margin: 20px 0px;\n}\n\ntable, th, td {\n  border: 1px solid black;\n  padding: 5px;\n}\n\ntable th {\n  background-color: #f2f2f2;\n}\n\ntable td button {\n  background-color: #980000;\n  color: white;\n  padding: 10px 20px;\n  margin: 5px 10px;\n}\n\ntable td button:hover {\n  background-color: #0c92ff;\n}\n\nnav {\n  display: flex;\n  align-items: center;\n  color: white;\n  gap: 10px;\n  padding: 20px 0px;\n  margin: 20px 0px;\n}\n\nnav a {\n  color: blue;\n  text-decoration: none;\n  font-weight: bold;\n}\n\nnav a:hover {\n  color: darkblue;\n}\n\n\nform{\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 20px;\n}\n\nform input, form select {\n  padding: 10px;\n  border: 1px solid #ccc;\n}\n\nform button {\n  padding: 10px 20px;\n  background-color: #980000;\n  color: white;\n  border: none;\n}\n\nform button:hover {\n  background-color: #0c92ff;\n}\n```\n\n# output:\n\n![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732501200066/97c76db4-5354-44ab-ab40-ebd6263b6a89.gif)\n\n**POSTMAN DOCS**\n\n[https://documenter.getpostman.com/view/24626304/2sAYBUDXqC](https://documenter.getpostman.com/view/24626304/2sAYBUDXqC)\n\n**Output Link**\n\n[https://angular-api-activity.web.app/user](https://angular-api-activity.web.app/user)\n\nGithub:\n\n[https://github.com/thirdygayares/angular-api](https://github.com/thirdygayares/angular-api)  \n  \nOutput:\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdygayares%2Fangular-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdygayares%2Fangular-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdygayares%2Fangular-api/lists"}