{"id":18615064,"url":"https://github.com/andrewjbateman/angular-components-study","last_synced_at":"2026-05-14T13:35:56.787Z","repository":{"id":41801441,"uuid":"162420145","full_name":"AndrewJBateman/angular-components-study","owner":"AndrewJBateman","description":":clipboard: App to study differences between dumb (presentational and portable) components and smart components (that can have logic, trigger change detection and manage data/services). ","archived":false,"fork":false,"pushed_at":"2023-03-04T03:02:46.000Z","size":1588,"stargazers_count":0,"open_issues_count":13,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-28T09:29:57.659Z","etag":null,"topics":["angular","angular13","api","change-detection","components","http-client","map","observables","rxjs","rxjs7","trigger-change-detection","typescript4"],"latest_commit_sha":null,"homepage":"","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/AndrewJBateman.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":"2018-12-19T10:16:37.000Z","updated_at":"2022-01-02T20:05:20.000Z","dependencies_parsed_at":"2025-02-18T03:45:05.819Z","dependency_job_id":"cd37c092-7b90-4e7e-ba3f-c3e7ebf043ff","html_url":"https://github.com/AndrewJBateman/angular-components-study","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/angular-components-study","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-components-study","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-components-study/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-components-study/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-components-study/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/angular-components-study/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-components-study/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33027091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-14T02:00:06.663Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","angular13","api","change-detection","components","http-client","map","observables","rxjs","rxjs7","trigger-change-detection","typescript4"],"created_at":"2024-11-07T03:28:00.578Z","updated_at":"2026-05-14T13:35:56.737Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: Angular Tutorial App\n\n* App to study differences between dumb (presentational and portable) components and smart components (that can have logic, trigger change detection and manage data/services).\n* Tutorial code from [Digital Fluency](https://www.youtube.com/channel/UCYFd7Qy93YP7gPERnxP545A) but with updates due to updated Angular versions - see [:clap: Inspiration](#clap-inspiration) below\n* **Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/angular-components-study?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/angular-components-study?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/angular-components-study?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/angular-components-study?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Angular Tutorial App](#zap-angular-tutorial-app)\n  * [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal_strength: Technologies](#signal_strength-technologies)\n  * [:floppy_disk: Setup](#floppy_disk-setup)\n  * [:computer: Code Examples](#computer-code-examples)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: Status \u0026 To-Do List](#clipboard-status--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:file_folder: License](#file_folder-license)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n* This app uses the following Angular concepts: components, data \u0026 property binding etc.\n\n## :camera: Screenshots\n\n![Example screenshot](./img/list-angular-repos.png).\n\n## :signal_strength: Technologies\n\n* [Angular v13](https://angular.io/)\n* [RxJS Library v7](https://angular.io/guide/rx-library) used to handle datastreams and propagation of change using observables.\n* [Angular Augury Chrome Extension](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd) used for debugging.\n* [Angular ChangeDetectionStrategy](https://angular.io/api/core/ChangeDetectionStrategy).\n\n## :floppy_disk: Setup\n\n* Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## :computer: Code Examples\n\n* _view-repos component that gets API repo data from github_\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { HttpClient } from '@angular/common/http'\nimport { map } from 'rxjs/operators';\n\n@Component({\n  selector: 'app-view-repos',\n  templateUrl: './view-repos.component.html',\n  styleUrls: ['./view-repos.component.css']\n})\n\n//smart component - loads API data from the internet,\n//the data from this ViewReposComponent is consumed by the 'app-repo-list'\n//in the app-repository-view component.\nexport class ViewReposComponent implements OnInit {\n  list: Observable\u003cany[]\u003e\n\n  constructor(http: HttpClient) {\n    const path = 'https://api.github.com/search/repositories?q=angular';\n    this.list = http.get\u003c{items: any[]}\u003e(path)\n      .pipe(\n        map(data =\u003e data.items),\n      );\n  }\n\n  ngOnInit() {\n  }\n}\n```\n\n## :cool: Features\n\n* Demonstrates difference between smart and dumb components by whether they can trigger change detection/manage data \u0026 services\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working.\n* To-Do: nothing\n\n## :clap: Inspiration\n\n* [Youtube video by 'Digital Fluency': The Difference Between Smart and Dumb Components](https://www.youtube.com/watch?v=r9vhfsnOb9o)\n\n## :file_folder: License\n\n* This project is licensed under the terms of the MIT license.\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: gomezbateman@yahoo.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-components-study","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fangular-components-study","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-components-study/lists"}