Skip to content

📋 App to show accordian UI and some artistic modifications

License

Notifications You must be signed in to change notification settings

AndrewJBateman/ionic-angular-accordian

Repository files navigation

⚡ 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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 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

Home Page

📶 Technologies

💾 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: gomezbateman@yahoo.com