Ionic 6 Full Starter App
IonicThemesBuy NOWLive Preview
  • What is Ionic 6 Full Starter App?
  • About this Ionic template
  • Template versions
  • Set up the development environment
  • Running the Ionic app
  • How to use this template?
  • Ionic Capacitor
  • Ionic Code Structure
  • Ionic Data Integration
  • Theming
  • Ionic Progressive Web App
  • Ionic Navigation
  • Ionic Server Side Rendering (SSR)
  • Ionic Splash Screens and Icons
  • App Shell
    • Image Shell
    • Text Shell
    • Aspect Ratio
  • Ionic Custom Components
    • Checkbox Wrapper
    • Countdown timer
    • Ionic Show/Hide Password
  • Ionic Walkthrough (or tutorial)
  • Categories
  • Ionic Firebase Integration
    • Firebase Authentication
    • Firebase CRUD
    • Firebase Hosting
    • Push Notifications
  • Google Maps & Geolocation
  • Ionic Video Playlist
  • Ionic Multi Language
  • Getting Started
  • Ionic Authentication
  • Ionic Side Menu
  • Ionic Profile
  • Contact Card
  • Social Sharing
  • Ionic Notifications
  • Forms and Validations
  • Filters
  • FAQs
  • Common Errors and Solutions
  • Glossary
  • Upcoming features
  • 🧐Changelog
  • Reviews / Testimonials ⭐️⭐️⭐️⭐️⭐️
Powered by GitBook
On this page
  • User Page
  • Friends Page

Was this helpful?

Ionic Profile

Profile Page of Ionic 5 Full Starter App

PreviousIonic Side MenuNextContact Card

Last updated 3 years ago

Was this helpful?

Profile section currently includes two pages: User Page and Friends Page. Both pages make use of the .

User Page

Includes different sections with common features such as a gallery of images and a image horizontal slider for the friends list.

Friends Page

The NgTemplateOutlet helps us creating reusable components and this is great for two reasons:

  1. Follows the single responsibility principle which states that pieces of your app should only have one purpose. Following this principle makes your app easier to test and develop.

  2. Using NgTemplateOutlet directive, instead of creating specific components, allows that we use the component for various use cases without having to modify the component itself.

This page uses an UI Component to organize different lists of friends for example: Friends, Followers and Following.

The three lists show the same information for each person/friend so we didn't want to repeat the code for each list. The solution we found to avoid repeating the code was to use . Also, we thought it was a good opportunity to show you how to use this Angular directive and help you improve your development skills.

If you have any question about how to use/modify this component, please .

In this page you will also find a UI Component that we use to filter the lists of persons/friends by name.

ion-segment
NgTemplateOutlet
contact us
ion-searchbar
App Shell
friends segment
searchbar for friends lists