Create a new app ionic
1. Install Node.js and NPM: Before you start creating your Ionic app, you need to install Node.js and NPM (Node Package Manager) on your computer. You can download and install them from the official website: .2. Install Ionic CLI: Once you have Node.js and NPM installed, you can install the Ionic CLI by running the following command in your terminal or command prompt:
npm install -g @ionic/cli
This command will install the latest version of the Ionic CLI globally on your system.
1. Create a new Ionic app: To create a new Ionic app, run the following command in your terminal or command prompt:
ionic start myApp
To create a new app with a specific template, you can use the --type option followed by the template name. For example, to create a new app with the blank template, run the following command:
ionic start myApp --type=blank
1. Run the app: Once you have created your app, you can run it in the browser by running the following command:
cd myApp
ionic serve
This will start a local development server and open your app in the default web browser. You can make changes to your app and see the changes live in the browser.
That's it! You have now created a new Ionic app and are ready to start building your own mobile app.
First create a class
To create a class in TypeScript, you can follow these steps: Step 1: Set up your TypeScript environment Make sure you have TypeScript installed on your machine. You can install it globally using npm (Node Package Manager) by running the following command:Step 2: Create a new TypeScript file
Create a new file with a .ts extension, for example, modal.ts.
Step 3: Define your class
In the TypeScript file, you can define your class using the class keyword. Here's an example:
Create an array of json
In the example above, we define a type called MyObject, which specifies the structure of each object in the array. It has two properties: name of type string and image of type string. You can add more properties to the object type as required.Define an array property in the component class to hold the data you want to display. For example, let's assume you have an array of items:
modal/modal.ts
export class Modal {
stories: any[] = [
{
name: 'Hassan',
image: 'https://resize-elle.ladmedia.fr/rcrop/1024,1024/img/var/plain_site/storage/images/beaute/maquillage/astuces/fenty-face-3599207/85505321-1-fre-FR/Le-maquilleur-de-Rihanna-nous-apprend-a-faire-la-Fenty-Face.jpg'
},
{
name: 'Fatima',
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMKLD7r4NZUuWSDdDG3VkI-bU_LKHy1TIp05FqEBH5KjxY7_9W&s'
},
{
name: 'Kaled',
image: 'https://images.totalbeauty.com/uploads/editorial/lg420x280/skin-tightening-intro.jpg'
},
{
name: 'Nader',
image: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/best-face-oils-1531174300.jpg?crop=0.502xw:1.00xh;0.259xw,0&resize=480:*'
},
{
name: 'Kouther',
image: 'https://i.pinimg.com/736x/ec/99/43/ec9943b1acbe9fbcbc54a05cbb2fc1b8.jpg'
},
{
name: 'Sara',
image: 'https://i.pinimg.com/736x/ca/a8/ee/caa8eece158092ab9bc21e1f95ec7295.jpg'
},
{
name: 'Ahmed',
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSXLwygNAUV7PaBvtksqAV-qFwXIoURbXXVAvjZddN3ZIbTM_Xt'
},
{
name: 'Tagwo',
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTFLhJ_JyOloIs1F6lbP887-2Fzt5vZmbQnUm9QHhkC6cCf9vRe'
},
{
name: 'Nina',
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSbzSdV92_Df-lJ9g-1Q0d_TsNH3eXpn0CfL4w3BQ8S_zwqRiSV'
},
{
name: 'Drmas',
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS5W4erHOEBxGKktluGgqk-icbNY-5ChPOUfsSJ-nOlw4gQoRfq'
}
]
posts: any[] = [
{
user: 'Ahmed',
like: '3.877',
image: 'https://jooinn.com/images/nice-girl-3.jpg',
post: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis sunt quaerat dolor quasi ratione libero molestiae? Quos odio maiores natus ab nisi commodi et, ducimus modi, nemo officia sequi dicta!'
},
{
user: 'Drmas',
like: '6.234',
image: 'https://d3g14u79hlxgy3.cloudfront.net/cache/img/4fefcf8ba2fbe731a7b7ec2defaf88593dd8fab6-4fefcf-crop-1080-crop.jpeg?q=1653903151',
post: 'Abusus enim multitudine hominum, quam tranquillis in rebus diutius rexit, ex agrestibus habitaculis urbes construxit multis opibus firmas et viribus, quarum ad praesens pleraeque licet'
},
{
user: 'Drmas',
like: '6.234',
image: 'https://previews.123rf.com/images/atasitseli/atasitseli1105/atasitseli110500013/9586124-nice-girl.jpg',
post: 'Abusus enim multitudine hominum, quam tranquillis in rebus diutius rexit, ex agrestibus habitaculis urbes construxit multis opibus firmas et viribus, quarum ad praesens pleraeque licet'
},
{
user: 'Drmas',
like: '6.234',
image: 'https://i.pinimg.com/600x315/5c/9b/1f/5c9b1f76b9d912a5d53ec5e0af6937c7.jpg',
post: 'Abusus enim multitudine hominum, quam tranquillis in rebus diutius rexit, ex agrestibus habitaculis urbes construxit multis opibus firmas et viribus, quarum ad praesens pleraeque licet'
},
{
user: 'Nina',
like: '1.300',
image: 'https://static.actu.fr/uploads/2022/04/cbl-1.jpg',
post: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis sunt quaerat dolor quasi ratione libero molestiae? Quos odio maiores natus ab nisi commodi et, ducimus modi, nemo officia sequi dicta!'
},
{
user: 'Tagwo',
like: '1.890',
image: 'https://www.shutterstock.com/image-photo/tree-against-sky-on-tranquil-260nw-434350822.jpg',
post: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis sunt quaerat dolor quasi ratione libero molestiae? Quos odio maiores natus ab nisi commodi et, ducimus modi, nemo officia sequi dicta!'
},
{
user: 'Issam',
like: '4.805',
image: 'https://us.123rf.com/450wm/arhar/arhar1910/arhar191000118/133287004-portrait-of-young-beautiful-woman.jpg?ver=6',
post: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis sunt quaerat dolor quasi ratione libero molestiae? Quos odio maiores natus ab nisi commodi et, ducimus modi, nemo officia sequi dicta!'
},
{
user: 'Sara',
like: '2.875',
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTvmsjFUrMwpNtuFV5En1s6z1AXzpDV_SthaVQG5IAahi0tk6b-',
post: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis sunt quaerat dolor quasi ratione libero molestiae? Quos odio maiores natus ab nisi commodi et, ducimus modi, nemo officia sequi dicta!'
}
]
}
Note that TypeScript will enforce type checking during compilation, so if you try to assign a value of the wrong type to a property or call a method with incorrect arguments, it will produce a compilation error.
Next, we declare a variable called myArray and assign an array of stories type to it. We populate the array with objects that match the defined structure.
Note that by specifying stories [], we indicate that myArray is an array containing objects of type MyObject. This helps TypeScript enforce type safety and provides better autocompletion and type checking while you work with the array.
Declare variables to display data
home.page.ts
import { Component } from '@angular/core';
import { Modal } from '../modal/modal';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
modal: Modal = new Modal();
stories: any[];
posts: any[];
constructor() {
this.stories = this.modal.stories;
this.posts = this.modal.posts;
}
}
Display data
In the component's template file (usually a .html file), use the ngFor directive to loop through the items and display them. For example:In the above code, *ngFor="let item of items" is the ngFor directive. It iterates over each item in the items array and generates an <ion-item> element for each item. The {{ item }} syntax is used to display the item's value inside the <ion-item> element.
Save the changes, and when you run your Ionic application, the data will be displayed using the ngFor directive.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button color="dark">
<ion-icon slot="icon-only" name="camera"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>
<img
src="https://drissas.com/wp-content/uploads/2019/11/instagram-new-logo.png">
</ion-title>
<ion-buttons slot="end">
<ion-button color="dark">
<ion-icon slot="icon-only" name="send"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div> class="text-stories">
<p>Stories</p>
<p>Voir tout</p>
</div>
<div class="stories">
<div class="story">
<div class="add_story">
<img
src="https://images.pexels.com/photos/1458332/pexels-photo-1458332.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
Custom css
1. Create a new SCSS file: Start by creating a new SCSS file in your Ionic project. You can name it whatever you prefer, such as custom.scss. This file will contain your custom styling.2. Import the SCSS file: Open the src/theme/variables.scss file in your Ionic project. This file contains the global variables used for theming. At the bottom of the file, import your custom SCSS file by adding the following line:
Make sure the path to your custom SCSS file is correct.
Add your custom styles: Open the custom.scss file you created in step 1. Here, you can add your custom styles using SCSS syntax. You can override existing Ionic variables or create new ones to customize various aspects of your app's appearance.
For example, if you want to change the primary color of your app, you can override the $ion-color-primary variable like this:
home.page.scss
ion-header img {
height: 47px;
margin-top: 4px;
}
.text-stories {
display: flex;
justify-content: space-between;
font-size: smaller;
font-weight: 700;
color: #171717;
margin-left: 7px;
margin-right: 7px;
}
.stories {
display: flex;
overflow: scroll;
}
.stories .img-box
{
margin-left: 7px;
margin-right: 12px;
background-image: url('https://drissas.com/wp-content/uploads/2019/11/instagram-bg-color.jpg');
background-size: contain;
border-radius: 50%;
padding: 2px;
}
.stories img {
width: 50px;
max-width: none;
height: 50px;
max-height: none;
border-radius: 50%;
overflow: hidden;
border: 2px solid white;
margin-bottom: -3px;
}
.stories p {
font-size: 11px;
text-align: center;
margin: 4px 0px 0px 0px;
font-weight: 500;
color: #383a3e;
}
.add_story {
position: relative;
margin-left: 7px;
margin-right: 12px;
border-radius: 50%;
padding: 2px;
}
.add_story ion-icon{
position: absolute;
bottom: 1px;
right: 1px;
border-radius: 50%;
background-color: white;
}
hr {
height: 2px !important;
width: 100% !important;
background: #d5d5d5 !important;
}
ion-avatar{
background-image: url('https://drissas.com/wp-content/uploads/2019/11/instagram-bg-color.jpg');
background-size: contain;
padding: 2px;
margin: 5px;
height: 35px;
width: 35px;
}
ion-avatar img {
border: 2px solid white;
}
ion-label {
font-size: 14px !important;
font-weight: 700;
color: #1e2023 !important;
margin-left: 5px;
}
.post_img {
width: 100%;
}
.flex-button {
display: flex;
justify-content: space-between;
}
.flex-button ion-icon {
font-size: 26px;
margin: 4px;
color: #86888f;
}
.insta-text {
font-size: 13px;
margin: 0px 6px 4px 6px;
}
Generate user profile page
1. Open your terminal or command prompt and navigate to the root directory of your Ionic project.2. Run the following command to generate a new page:
Ionic will generate the necessary files and folders for your new page in the appropriate location. You can find the generated files under the src/app directory.
Once the page is generated, you need to add it to the navigation stack so that it can be accessed within your app. Open the src/app/app-routing.module.ts file and import the generated page:
ionic generate page profile
ActivatedRoute
1. Import the necessary modules and classes:2. Inject the ActivatedRoute in your component's constructor:
3. Access the snapshot of the route's parameters in your component's code:
Here, this.route.snapshot.params.id provides access to the snapshot of the route's parameters. You can then access individual parameters using their respective keys.
Note that the snapshot property gives you a one-time snapshot of the route's parameters when the component is initialized. If the route parameters change while the component is active, you won't receive updates. If you need to receive updates to the route parameters dynamically, you can use the params observable instead of the snapshot.
To use the params observable, you would modify step 3 as follows:
profile.page.ts
import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Modal } from '../modal/modal';
@Component({
selector: 'app-explore-container',
templateUrl: './explore-container.component.html',
styleUrls: ['./explore-container.component.scss'],
})
export class ExploreContainerComponent implements OnInit {
@Input() name: string;
@Input() image: string;
modal: Modal = new Modal();
user: any;
posts: any;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
const name = this.route.snapshot.params.id;
this.user = this.modal.stories.find(d => d.name == name);
this.posts = this.modal.posts.filter(d => d.user == name)
console.log(this.posts);
}
}
Display user information
To display an object in an Ionic application using HTML, you can make use of the Angular template syntax. Here's an example of how you can display an object property in HTML within an Ionic app:1. In your HTML template file (e.g., profile-page.html), you can display the object properties using the double curly braces {{ }}:
In the above example, the properties of the myObject object (name, image) are displayed within <p> tags. You can customize the HTML structure and styling to fit your needs.
Remember to import and include the MyComponent in your module file (app.module.ts or respective module file) and define the appropriate selector for your component.
This example assumes you're using Ionic with Angular. If you're using a different version of Ionic or a different framework, the syntax might vary slightly.
profile.page.html
<ion-content> <br>
<ion-item lines="none">
<ion-label>
<h1><b>{{user.name}}</b></h1>
</ion-label>
<ion-avatar>
<img src="{{user.image}}">
</ion-avatar>
</ion-item>
<div class="info_box">
<div class="data_box">
<b>245</b>
<p>posts</p>
</div>
<div class="data_box">
<b>7850</b>
<p>followers</p>
</div>
<div class="data_box">
<b>715</b>
<p>following</p>
</div>
</div>
<ion-button class="text_button" shape="round" size="small">Envoyer un message</ion-button>
<ion-button class="icon_button" shape="round" size="small" fill="outline"
color="medium">
<ion-icon color="dark" slot="icon-only" name="person-outline"></ion-icon>
<ion-icon color="dark" slot="icon-only" name="checkmark-outline"></ion-icon>
</ion-button>
<ion-button class="icon_button" shape="round" size="small" fill="outline"
color="medium">
<ion-icon color="dark" slot="icon-only" name="caret-down-circle-outline"></ion-icon>
</ion-button>
<ion-item lines="none">
<ion-label>
<h3><b>Alise Smith</b> <ion-icon color="primary" name="checkmark-circle"></ion-icon></h3>
<p>Fashion-designer, London UK</p>
</ion-label>
</ion-item>
<ion-segment color="medium">
<ion-segment-button>
<ion-icon name="keypad"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="list"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="star"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="person-outline"></ion-icon>
</ion-segment-button>
</ion-segment>
<div class="grid" *ngFor="let p of posts">
<div class="img_box" style="background-image: url('{{p.image}}');"></div>
<h3>{{p.post}}</h3>
</div>
</ion-content>
User profile scss
.info_box {
display: flex;
}
.data_box {
margin: 4px 36px 7px 15px;
text-align: center;
}
.data_box b{
font-size: 20px;
}
.data_box p{
margin: 2px;
font-size: 12px;
color: grey;
font-weight: 500;
}
.text_button {
margin-left: 10px;
text-transform: initial;
--padding-start: 17px;
--padding-end: 17px;
}
.icon_button {
margin-left: 10px;
--padding-start: 7px;
--padding-end: 7px;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.img_box {
border: 1px solid white;
width: 40%;
padding-bottom: 31%;
background-size: cover;
background-repeat: no-repeat;
}
h3 {
font-size: 13px;
margin: 0px 6px 4px 6px;
}
By following these steps, you can create and use custom UI components in your Ionic app. Remember to refer to the Ionic documentation and Angular documentation for further guidance on building complex UI elements and implementing functionality.