{"id":18614803,"url":"https://github.com/andrewjbateman/ionic-angular-btmdrawer","last_synced_at":"2026-04-21T05:33:27.113Z","repository":{"id":52665906,"uuid":"304105663","full_name":"AndrewJBateman/ionic-angular-btmdrawer","owner":"AndrewJBateman","description":":clipboard: Ionic Angular app to display a sliding drawer pulled from the bottom of the screen using gestures","archived":false,"fork":false,"pushed_at":"2023-06-27T12:19:09.000Z","size":1957,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-23T22:42:56.338Z","etag":null,"topics":["angular","angular16","drawer","drawer-opening","gestures","gestures-motions","ionic","ionic7","tutorial-code","typescript"],"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":"2020-10-14T18:44:33.000Z","updated_at":"2024-01-19T14:25:58.000Z","dependencies_parsed_at":"2024-11-07T03:40:57.348Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/ionic-angular-btmdrawer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/ionic-angular-btmdrawer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-btmdrawer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-btmdrawer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-btmdrawer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-btmdrawer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/ionic-angular-btmdrawer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-btmdrawer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32078922,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T02:38:07.213Z","status":"ssl_error","status_checked_at":"2026-04-21T02:38:06.559Z","response_time":128,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","angular16","drawer","drawer-opening","gestures","gestures-motions","ionic","ionic7","tutorial-code","typescript"],"created_at":"2024-11-07T03:27:04.090Z","updated_at":"2026-04-21T05:33:27.096Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: Ionic Angular Audio Reproduction\n\n* App to open a bottom drawer using gestures.\n* Another great tutorial from [Simon Grimm 'How to Create an Ionic Bottom Drawer with Gestures'](https://www.youtube.com/watch?v=xl4S8FM8Wcc\u0026t=0s).\n\n## :page_facing_up: Table of contents\n\n* [:zap: Ionic Angular Audio Reproduction](#zap-ionic-angular-audio-reproduction)\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* Ion-button and gestures used to open or close a drawer with text\n\n## :camera: Screenshots\n\n![screenshot](./img/drawer.png)\n\n## :signal_strength: Technologies\n\n* [Ionic/angular v7](https://ionicframework.com/)\n* [Angular v16](https://angular.io/)\n\n## :floppy_disk: Setup\n\n* `npm i`\n* `ionic serve` to start the server on _localhost://8100_\n\n## :computer: Code Examples\n\n* extract from `drawer.component.ts` to gently open or close the drawer when HTML button is toggled\n\n```typescript\n// Function activated by html button to open drawer if closed and vice-versa\n // ViewChild 'drawer' used with the read: ElementRef metadata property above\n toggleDrawer() {\n  const drawer = this.drawer.nativeElement;\n  this.openState.emit(!this.isOpen);\n\n  if (this.isOpen) {\n   drawer.style.transition = '.4s ease-out';\n   drawer.style.transform = '';\n   this.isOpen = false;\n  } else {\n   drawer.style.transition = '.4s ease-in';\n   drawer.style.transform = `translateY(${-this.openHeight}px)`;\n   this.isOpen = true;\n  }\n }\n```\n\n## :cool: Features\n\n* SCSS makes drawer open and close gently\n\n## :clipboard: Status \u0026 To-do list\n\n* Status: Working.\n* To-do: Button text can be linked to drawer status so it says 'open drawer' when drawer closed and 'close drawer' when drawer open. Other scss effects could be added to make the drawer opening/closing more fun.\n\n## :clap: Inspiration\n\n* [Simon Grimm 'How to Create an Ionic Bottom Drawer with Gestures'](https://www.youtube.com/watch?v=xl4S8FM8Wcc\u0026t=0s).\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@gmail.com`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fionic-angular-btmdrawer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fionic-angular-btmdrawer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fionic-angular-btmdrawer/lists"}