Ionic Profile
Profile Page of Ionic 5 Full Starter App
Profile section currently includes two pages: User Page and Friends Page. Both pages make use of the App Shell.
Includes different sections with common features such as a gallery of images and a image horizontal slider for the friends list.
This page uses an ion-segment UI Component to organize different lists of friends for example: Friends, Followers and Following.
.png?alt=media&token=775f3ffc-e034-4c28-91ac-d7810c10fc39)
friends segment
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 NgTemplateOutlet. Also, we thought it was a good opportunity to show you how to use this Angular directive and help you improve your development skills.
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.
In this page you will also find a ion-searchbar UI Component that we use to filter the lists of persons/friends by name.
%20(1).png?alt=media&token=119b8b16-8db9-427c-af3b-9cc6f95fb54a)
searchbar for friends lists
Last modified 1yr ago