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=tabs
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.
Generate ionic pages
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 generate page tab4
ionic generate page sheet
3. 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.
4. 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:
TabsPageRoutingModule
1. 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:tabs.page.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
},
{
path: 'tab2',
loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
},
{
path: 'tab3',
loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
},
{
path: 'tab4',
loadChildren: () => import('../tab4/tab4.module').then( m => m.Tab4PageModule)
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
})
export class TabsPageRoutingModule {}
That's it! You have successfully generated a new page using the Ionic CLI and integrated it into your app's navigation.
How to use ion-tabs
Ion-tabs is a component provided by the Ionic framework for creating tab-based navigation in mobile applications. It allows you to organize your app's content into separate tabs, with each tab displaying a different set of information or functionality. Here's a basic guide on how to use ion-tabs:1. Create tab components: Each tab defined in the tabs.router.module.ts file needs its own component. Create separate components for each tab (e.g., tab1, tab2, tab3) inside the respective folders.
2. Customize tab content: Open the created tab component files (tab1.page.ts, tab2.page.ts, tab3.page.ts) and modify them to suit your app's needs. You can define the HTML template, add styles, and implement any required functionality.
tabs.page.html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1" #tab1>
<ion-icon [name]="tab1.selected ? 'home' : 'home-outline'"></ion-icon>
<ion-label>Home</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2" #tab2>
<ion-icon [name]="tab2.selected ? 'videocam' : 'videocam-outline'"></ion-icon>
<ion-label>Tab 2</ion-label>
</ion-tab-button>
<ion-tab-button (click)="add()">
<ion-icon name="add-circle-outline"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab3" #tab3>
<ion-icon [name]="tab3.selected ? 'albums' : 'albums-outline'"></ion-icon>
<ion-label>Tab 3</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab4" #tab4>
<ion-icon [name]="tab4.selected ? 'library' : 'library-outline'"></ion-icon>
<ion-label>Tab 4</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
ModalController
1. Import the ModalController module: In your component file, import the ModalController module from the Ionic package. Add the following import statement at the top of your file:2. Inject the ModalController: In your component's constructor, inject the ModalController so that you can use it within your component. Add the following line to your constructor:
3. Open the modal:
To open the modal, use the create() method of the ModalController. This method returns a promise that resolves with the modal component instance. You can then use this instance to manipulate the modal. Here's an example of opening a modal:
tabs.page.ts
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { SheetPage } from '../sheet/sheet.page';
@Component({
selector: 'app-tabs',
templateUrl: 'tabs.page.html',
styleUrls: ['tabs.page.scss']
})
export class TabsPage {
constructor(private modelCCrtl: ModalController) {}
async add() {
const modal = await this.modelCCrtl.create({
component: SheetPage,
breakpoints: [0.5],
initialBreakpoint: 0.5,
handle: false,
});
await modal.present();
}
}
Create Home Data
in assets/data/HomeData.json create file HomeData.json1. Define the data structure: Determine the structure and content of your JSON data. Decide what fields or properties you need and the corresponding values.
2. Choose a programming language: JSON can be created in various programming languages such as Python, JavaScript, Java, C#, and more. Choose the language you are comfortable with or the one that suits your project.
3. Create an object or dictionary: In most programming languages, JSON data is represented as objects or dictionaries. Initialize an object or dictionary to store your data.
4. Populate the object with data: Assign values to the fields or properties of the object. You can set values of different types, such as strings, numbers, booleans, arrays, or nested objects.
modal/modal.ts
[
{
"title": "Hot to VLOG Like Case neistat by casey Neistat",
"author": "CaseNeistat",
"views": "5.2M",
"ago": "4 years",
"duration": 849,
"id": 1
},
{
"title": "Dwigth Thinks it's Friday - the office US",
"author": "The Office",
"views": "4.2M",
"ago": "8 Months",
"duration": 159,
"id": 2
},
{
"title": "How to use the sheet in Ionic Framework and React",
"author": "Alan Montgomery",
"views": "78",
"ago": "13 hours",
"duration": 654,
"id": 3
},
{
"title": "Hot to VLOG Like Case neistat by casey Neistat",
"author": "CaseNeistat",
"views": "5.2M",
"ago": "4 years",
"duration": 849,
"id": 4
},
{
"title": "Dwigth Thinks it's Friday - the office US",
"author": "The Office",
"views": "4.2M",
"ago": "8 Months",
"duration": 159,
"id": 5
},
{
"title": "How to use the sheet in Ionic Framework and React",
"author": "Alan Montgomery",
"views": "78",
"ago": "13 hours",
"duration": 654,
"id": 6
}
]
Map
In TypeScript, you can use the map function to transform elements in an array and create a new array based on the transformation. The map function takes a callback function as an argument and applies it to each element in the array. Here's how you can use the map function in TypeScript:You can also use arrow functions or named functions as the callback:
To change value from false to true when click on segments button.
tab1.page.ts
import { Component } from '@angular/core';
import HomeData from '../../assets/data/HomeData.json';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
videos = [];
segments: any[] = [];
constructor() {
this.segments = [
'All',
'New to you',
'Gaming',
'Sitcoms',
'Computer program',
'Documentary',
'Music'
].map((val) => ({
title: val,
selected: false
}));
setTimeout(() => {
this.selectSEgments(0);
this.videos = HomeData;
}, 1000);
}
selectSEgments(i) {
this.segments.map((item) => {
item.selected = false;
});
this.segments[i].selected = true;
}
doRefresh(event: any) {
setTimeout(() => {
event.target.complete();
}, 1500)
}
}
ngFor
To use ngFor in Ionic, you'll typically follow these steps:Step 1: Use ngFor in the component template
In the tab1.page.html file, you can use the ngFor directive to loop over the items array and display each item. Here's an example:
In this example, *ngFor="let item of items" is the ngFor directive. It iterates over the items array and assigns each item to the item variable. The content inside the <ion-item> tag will be repeated for each item in the array.
Step 2: Add the component to a page
To see the my-component in action, you need to add it to a page. Open the page file where you want to use the component (e.g., tab1.page.ts), import the MyComponent, and add it to the template or templateUrl of the page:
tab1.page.ts
<ion-header #header>
<ion-toolbar color="light">
<img src="./assets/data/youtube.png" alt>
<ion-buttons slot="end">
<ion-button size="small"> <ion-icon name="tv-outline"></ion-icon>
</ion-button>
<ion-button size="small"> <ion-icon name="notifications-outline"></ion-icon>
</ion-button>
<ion-button size="small"> <ion-icon name="search-outline"></ion-icon>
</ion-button>
<ion-button size="small"> <ion-icon name="person-circle-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar color="light">
<div class="button-bar">
<ion-button shape="round" *ngFor="let seg of segments; let i = index"
(click)="selectSEgments(i)" size="small"
[ngClass]="{'active': seg.selected, 'inacative': !seg.selected}">
{{seg.title}}
</ion-button>
</div>
</ion-toolbar>
</ion-header>
<ion-content [appHideHeader]="header" scrollEvents="true">
<div *ngIf="!videos.length">
<div *ngFor="let i of [].constructor(4)" class="ion-margin-bottom">
<ion-skeleton-text animated style="width: 100%; height: 30vh !important"></ion-skeleton-text>
<ion-skeleton-text
style="width: 75%; height: 20px !important; margin: 10px;"></ion-skeleton-text>
<ion-skeleton-text
style="width: 40%; height: 20px !important; margin: 10px;"></ion-skeleton-text>
</div>
</div>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content refreshingSpinner="crescent"
pullingIcon="refresh-outline"></ion-refresher-content>
</ion-refresher>
<div *ngFor="let video of videos" class="video ion-margin-bottom">
<div class="duration">{{video.duration * 1000 | date:'mm:ss'}} </div>
<img [src]="'./assets/data/' + video.id + '.png'"
style="height: 300px; width: 100%;">
<ion-row>
<ion-col size="2">
<ion-avatar>
<img [src]="'./assets/data/' + video.id + '.png'">
</ion-avatar>
</ion-col>
<ion-col size="8">
<ion-text>{{video.title}}</ion-text>
<div color="medium" style="font-size: small;">
{{video.author}} . {{video.views}} views . {{video.ago}} ago
</div>
</ion-col>
<ion-col size="2" class="ion-text-right">
<ion-button size="small" fill="clear">
<ion-icon name="ellipsis-vertical-outline"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</div>
</ion-content>
Don't forget to add youtube.png photo to "./assets/data/youtube.png" File
That's it! You've successfully used ngFor in an Ionic application. When you run your Ionic project, you should see the items rendered in the specified component or page.
Custom scss
1. Open tab1-styles.scss and start writing your custom SCSS styles. For example, you can define variables, mixins, or override existing Ionic styles:tab1-styles.scss
.button-bar {
display: flex;
overflow-x: scroll;
padding-bottom: 10px;
ion-button::part(native) {
padding: 16px;
}
}
::-webkit-scrollbar {
display: none;
}
.active {
--background: #4F4D4D;
--color: #fff
}
.inacative {
--background: #edefef;
--color: var(--ion-color-primary);
}
.video {
position: relative;
}
.duration {
position: absolute;
right: 15px;
top: 255px;
color: #FFF;
font-weight: 500;
background-color: #000;
padding: 4px;
border-radius: 4px;
}
Now, your custom SCSS styles should be applied to the Ionic project. You can continue adding more custom styles to the custom-styles.scss file or create additional SCSS files and import them as needed.
Display data on sheet
In TypeScript, you can use arrays to store and manipulate collections of values of the same type. Arrays allow you to store multiple values and access them using index positions. Here's how you can use arrays in TypeScript:Declaring an array:
2. Close the modal:To close the modal, you can use the dismiss() method of the modal instance. Here's an example:
sheet.page.ts
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-sheet',
templateUrl: './sheet.page.html',
styleUrls: ['./sheet.page.scss'],
})
export class SheetPage implements OnInit {
items = [
{
text: "Create a short",
icon: "videocam-outline"
},
{
text: "Update a video",
icon: "push-outline"
},
{
text: "Go live",
icon: "radio-outline"
},
{
text: "Add to your story",
icon: "add-circle-outline"
},
{
text: "Create a post",
icon: "create-outline"
}
]
constructor(private modelCrtl: ModalController) { }
ngOnInit() {
}
dissmis() {
this.modelCrtl.dismiss();
}
}
By using arrays and their associated methods, you can efficiently work with collections of values in TypeScript.
sheet.page.html
<ion-header class="ion-no-border">
<ion-toolbar color="light">
<ion-title mode="md">Create</ion-title>
<ion-buttons slot="end">
<ion-button (click)="dissmis()" fill="clear">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item *ngFor="let item of items" lines="none">
<ion-icon slot="start" [name]="item.icon"></ion-icon>
<ion-label>{{item.text}}</ion-label>
</ion-item>
<br>
</ion-content>
ion-item {
margin-top: 10px;
margin-bottom: 10px;
ion-icon {
background: #f2f2f2;
padding: 10px;
border-radius: 50%;
--ionicon-stroke-width: 16px;
}
}
1. Add platforms:
Run the following command to add the desired platforms for your application (e.g., iOS, Android): ionic cordova platform add ios android.
2. Develop your application:
Open the project in your preferred code editor.
Navigate to the src directory to find the source files of your application.
Modify the HTML, CSS, and JavaScript files to build the desired user interface and functionality of your application.
3. Test your application:
You can use the following commands to test your application in a web browser during development:
ionic serve or ionic serve --lab to launch a local development server and preview your app in a web browser.
For testing on specific platforms, you can use the following commands:
° ionic cordova emulate ios to emulate your app on the iOS simulator.
° ionic cordova emulate android to emulate your app on an Android emulator.
4. Build and deploy your application:
Once your application is ready for deployment, you can use the following commands to build and package your app for specific platforms:
° ionic cordova build ios to build the iOS version of your app.
° ionic cordova build android to build the Android version of your app.
The generated build files can be found in the platforms directory of your project.
These are the general steps to get started with creating a custom application using Ionic. Make sure to refer to the Ionic documentation (https://ionicframework.com/docs) for more detailed information on working with Ionic and its various features and capabilities.