⚡ Ionic Angular Audio Reproduction

• App to open a bottom drawer using gestures.
• Another great tutorial from Simon Grimm 'How to Create an Ionic Bottom Drawer with Gestures'.

📄 Table of contents

• ⚡ Ionic Angular Audio Reproduction
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Ion-button and gestures used to open or close a drawer with text

📷 Screenshots

📶 Technologies

• Ionic/angular v7
• Angular v16

💾 Setup

• npm i
• ionic serve to start the server on localhost://8100

💻 Code Examples

• extract from drawer.component.ts to gently open or close the drawer when HTML button is toggled

// Function activated by html button to open drawer if closed and vice-versa
 // ViewChild 'drawer' used with the read: ElementRef metadata property above
 toggleDrawer() {
  const drawer = this.drawer.nativeElement;
  this.openState.emit(!this.isOpen);

  if (this.isOpen) {
   drawer.style.transition = '.4s ease-out';
   drawer.style.transform = '';
   this.isOpen = false;
  } else {
   drawer.style.transition = '.4s ease-in';
   drawer.style.transform = `translateY(${-this.openHeight}px)`;
   this.isOpen = true;
  }
 }

🆒 Features

• SCSS makes drawer open and close gently

📋 Status & To-do list

• Status: Working.
• 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.

👏 Inspiration

• Simon Grimm 'How to Create an Ionic Bottom Drawer with Gestures'.

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]