How to make customized alert in ionic 2?
For these I always just create a custom modal page. You can full control all aspects of a modal, including sizing. It's basically just a page with a controller and template, super easy to implement too.
http://ionicframework.com/docs/v2/api/components/modal/ModalController/ should get you all set
how to add list in alert box ionic 2
You can add list to alert box in following way,
export class Abc{
listItems: Array<any> = [];
backtocart(){
this.listItems = [];
for (let item of this.list) {
let li = new ListItem;
li.name = item.name;
li.thumbnail = item.thumbnail;
li.price = item.price;
this.listItems.push(li);
}
let alert = this.alertCtrl.create({
title: 'Low battery',
subTitle: '10% of battery remaining',
buttons: this.listItems
});
alert.present();
}
}
class ListItem {
name: string;
thumbnail: any;
price: string;
}
How do I write an ionic alert component once for the entire application?
Could make use of snackbar as a service. Configure the styling of the modal, pass in data for the modal (custom messages etc). https://material.angular.io/components/snack-bar/examples
MatSnackBar is an angular directive that’s used for showing a notification bar specifically on the mobile devices.
These types of UI components are generally used several times.
So to avoid the repetition of code, a service can simply be created to use SnackBar in different components.
To create a service you have to use the following command:
ng g s snackBar
Now import MatSnackBar from @angular/core and define the function openSnackBar (you can always use a different name).
Service
import { Injectable } from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar';
@Injectable({
providedIn: 'root'
})
export class SnackBarService {
//create an instance of MatSnackBar
constructor(private snackBar:MatSnackBar) { }
/* It takes three parameters
1.the message string
2.the action
3.the duration, alignment, etc. */
openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
duration: 2000,
});
}
}
Import the snackBarService and inject it inside the constructor of the component, in which you want to use the Snackbar. This will create an instance of the service say snackBService.
Now call the openSnackBar function wherever it is required, with the help of snackBService.
Component
import { Component, OnInit } from '@angular/core';
import {SnackBarService} from '../snack.service';
@Component({
selector: 'app-profile',
templateUrl: './snackBar.html',
styleUrls: ['./snackBar.css']
})
export class SnackBar {
// create an instance of SnackBarService
constructor(private snackBService:SnackBarService) { }
//defining method for display of SnackBar
trigger(message:string, action:string)
{
this.snackBService.openSnackBar(message, action);
}
}
By repeating these steps we can use the snackBar inside any component.
Example:
<button (click)="trigger('This is a ', 'SnackBar')">
SnackBarButton
</button>
Related Topics
How to Fix The Height of a <Div> Element
Angular2 Sub Component Break CSS Relationship
Make an Image to Fit Its Parent Dimensions
Styling The Calendar for HTML5 Native Datepicker
Left Align Text and Right Align Image in CSS
Prevent Contenteditable Mode from Creating <Span> Tags
How to Customize Only with CSS for HTML5 Input Range Slider-Vertical
How to Have "Margin:Auto" and "Margin-Left:Offset" Working Together
Change Cursor Over HTML5 Canvas When Dragging The Mouse
Br Line-Height in Safari and Chrome Leaving Gap
Calculating Background-Position with a Formula in Less CSS
How to Change The Image Inside an HTML5 Form-Validation Message
How to Change a Div Padding Without Affecting The Width/Height