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.
ion-modal
A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases.The ion-modal component in Ionic is used to display a modal or dialog box in your app. Modals are a useful way to provide extra information or actions to the user without leaving the current page.
To use ion-modal, you'll need to follow these steps:
Create data
To create an array of objects in TypeScript, you can use the following syntax:In this example, users is an array of objects with three properties: name, image and job, which is a string
This approach allows you to reuse the MyObject interface in other parts of your code.
home.page.ts
import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
users = [
{
image: 'https://i.pravatar.cc/300?u=b',
name: 'Connor Smith',
job: 'Sales Rep'
},
{
image: 'https://i.pravatar.cc/300?u=a',
name: 'Daniel Smith',
job: 'Product Designer'
},
{
image: 'https://i.pravatar.cc/300?u=d',
name: 'Greg Smith',
job: 'Director of Operations'
},
{
image: 'https://i.pravatar.cc/300?u=e',
name: 'Zoey Smith',
job: 'CEO'
}
]
presentingElement: any;
constructor(private actionSheetCtrl: ActionSheetController) { }
ngOnInit() {
this.presentingElement = document.querySelector('.ion-page');
}
canDismiss = async () => {
const actionSheet = await this.actionSheetCtrl.create({
header: 'Are you sure?',
buttons: [
{
text: 'Yes',
role: 'confirm',
},
{
text: 'No',
role: 'cancel',
},
],
});
actionSheet.present();
const { role } = await actionSheet.onWillDismiss();
return role === 'confirm';
};
To use ActionSheetController in Ionic, you can follow these steps:
1. Import the ActionSheetController in your .ts file:
2. Inject the ActionSheetController in the constructor of your component:
3. Create an async function that will present the action sheet:
In this example, the presentActionSheet() function creates an action sheet with a header and three buttons. The first two buttons have a handler function that will be called when the button is clicked, while the third button has a role of cancel.
Create a modal page:
1. In the component where you want to open the modal, create a method to present the modal:
<ion-header>
<ion-toolbar color="primary">
<ion-title>ionic modal</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-button id="open-modal" expand="block">Open Modal</ion-button>
<ion-modal #modal trigger="open-modal" [canDismiss]="canDismiss" [presentingElement]="presentingElement">
<ng-template>
<ion-content>
<ion-toolbar>
<ion-title>Modal</ion-title>
<ion-buttons slot="end">
<ion-button color="light" (click)="modal.dismiss()">Close</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-list>
<ion-item *ngFor="let user of users">
<ion-avatar slot="start">
<ion-img src="{{user.image}}"></ion-img>
</ion-avatar>
<ion-label>
<h2>{{user.name}}</h2>
<p>{{user.job}}</p>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ng-template>
</ion-modal>
<ion-content class="ion-padding">
<p>You will be prompted when closing this modal.</p>
</ion-content>
</ion-content>
Costum css
CSS (Cascading Style Sheets) is used to style and format the layout of web pages. Here are the basic steps for using CSS:1. Create a new CSS file: Open a text editor (such as Notepad or Sublime Text) and create a new file with a ".css" extension. This file will contain your CSS code.
2. Link your CSS file to your HTML document: In the HTML file where you want to apply the CSS styles.
home.page.css
ion-modal {
--height: 50%;
--border-radius: 16px;
--box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
ion-modal::part(backdrop) {
background: rgba(209, 213, 219);
opacity: 1;
}
ion-modal ion-toolbar {
--background: rgb(14 116 144);
--color: white;
}
ion-modal can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the modal.
When using ion-modal with Angular, React, or Vue, the component you pass in will be destroyed when the modal is dismissed. As this functionality is provided by the JavaScript framework, using ion-modal without a JavaScript framework will not destroy the component you passed in. If this is a needed functionality, we recommend using the modalController instead.
Finally, we call the present method on the modal to display it to the user.
And that's it! You should now have a working modal in your Ionic app.