AndrewJBateman / ionic-angular-accordian

:clipboard: App to show accordian UI and some artistic modifications

⚡ Ionic Angular Accordian

• App to create a simple accordian widget using the Ionic framework.
• Accordions are often used in the UI for grouping and display of related information.
• Tutorial code from Mastering Ionic - see 👏 Inspiration below.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• Added to the app.module.ts is a CUSTOM_ELEMENTS_SCHEMA allows custom component to be recognised by Angular when transpiling the code

📷 Screenshots

📶 Technologies

• Ionic/angular v7
• Angular v16

💾 Setup

• To start the server on localhost://8100 type: 'ionic serve' or on localhost://4200 type: 'ng serve'

💻 Code Examples

• extract from home.page.html: for loop used to display info on each technology from the simple array created in the ts file.

<ion-content padding>
  <app-accordion
    *ngFor="let technology of technologies"
    name="{{ technology.name }}"
    description="{{ technology.description }}"
    image="{{ technology.image }}"
    (change)="captureName($event)"
  ></app-accordion>
</ion-content>

🆒 Features

• Data is stored in an array of objects but this could be replaced with json data from an API call.
• Use of @input to pass current name, description & image link strings from home to the accordian widget
• Updated to latest Ionic/Angular versions with dependency updates and all dependency vulnerabilities resolved.

📋 Status & To-do list

• Status: Working.
• To-do: work out how to add HTML links inside the accordion, maybe by using a function.

👏 Inspiration

Project inspired by Mastering Ionic's 'Creating a simple accordion widget in Ionic 4'.

📁 License

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

✉️ Contact

• Repo created by ABateman, email: [e-mail]