I have seen someone else trying (on svelte slack) and did try myself, but I think there are many dependencies in the package and it is using SASS or something else (not sure what). Maybe that hinders the build process to go through.
My project: https://ionicsvelte.firebaseapp.com, https://github.com/Tommertom/svelte-ionic-app
private arrayOfObjects= [];
As you do not type the objects itself (which is a pity btw), you should try the easiest route.
I feel really dumb now, I tried to initialize this way, but declaring the type as a normal array 
private arrayOfObjects: [] = [];
In the end I was doing this way and deleting the first object:
private submenus: [{name:string, active:boolean}] = [{name:'', active:false}];
The urge to declare the type of every variable… Well, thank you!
Hi @maid, please check this blog from Azure: https://techcommunity.microsoft.com/t5/azure-developer-community-blog/using-azure-notification-hubs-in-apache-cordova-and-ionic-apps/ba-p/1056685
And the demo repo https://github.com/Azure/azure-notificationhubs-samples/tree/master/Ionic/ionic-4
Hi All,
I am using a Windows PC for the last 10 years but never faced this situation of Mac Error Code 43. Whenever I transfer a file from my desktop to a USB drive, this error window crops up. Do I have a solution to this problem?
iam creating desktop app, is it possible to run as windows application? i am creating tree menu , its expanding but not closing, how can i i make it close when i click again same button?
my code is:
HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>IETM</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="ietm.css">
<style>
</style>
<!--<script type="application/javascript" src="bootstrap-4.3.1-dist/js/bootstrap.js"> </script>
<script type="application/javascript" src="jQuery_v3_4_1.js"> </script>-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
<script type="application/javascript" src="ietm.js"> </script>
<script>
</script>
</head>
<body>
<div class="header">
<img class="header_img" src="assets/Shell_Header.svg" alt=""/>
<span>V1.0.0</span>
<span>
</span>
<div style="width: 20%; text-align: right; border: 2px solid #ca4747">
<!-- <input type="text" id="extSearch"> -->
<div id="extSearch"></div>
<button id='voiceBtn' onclick="start_convert()">Voice Search</button>
<br><br>
<span id='message'></span>
</div>
</div>
<div id="content">
<div class="split menu" id="menu">
<div class="search" action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
<div class="menuList" id="tocmenu">
<!-- load Menu Here;-->
</div>
</div>
<div class="split textContent">
<div class="textpanelTitle">Content</div>
<iframe id="loadTextContent"></iframe>
</div>
<div class="split right" align="center">
<iframe id="loadVideoContent"></iframe>
</div>
</div>
<script>
var message = document.querySelector('#extSearch');
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
var grammar = '#JSGF V1.0;'
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.onresult = function(event) {
var last = event.results.length - 1;
var command = event.results[last][0].transcript;
message.textContent = command;
};
recognition.onspeechend = function() {
recognition.stop();
};
recognition.onerror = function(event) {
message.textContent = 'Error occurred in recognition: ' + event.error;
}
document.querySelector('#voiceBtn').addEventListener('click', function(){
recognition.start();
});
</script>
</body>
</html>
js file
$(document).ready(function () {
var menuList;
var setMenuDiv = "";
function loadMenu() {
$.getJSON("ietm_menu.json", function (data) {
menuList = data;
var mainInc = 0;
var sub1Inc = 0
var sub2Inc = 0;
var sub3Inc = 0;
var sub4Inc = 0;
var sub5Inc = 0;
for (var menu of data.menu) {
mainInc++;
sub1Inc = 0;
sub2Inc = 0;
sub3Inc = 0;
sub4Inc = 0;
sub5Inc = 0;
setMenuDiv += '<ul class="mainMenu">';
setMenuDiv += '<li id="m_' + mainInc + '" data-filename="' + ((menu.fileName != "") ? menu.fileName : "") + '" data-submenu="' + menu.subtitle.length + '">';
setMenuDiv += '<span>' + menu.name + '</span>';
if (menu.subtitle.length != 0 || menu.subtitle.length != undefined) {
setMenuDiv += '<span class="down_arrow"><i class="fa fa-chevron-down"></i></span>';
//setMenuDiv +='<div class="menuList mainMenu" id="m'+mainInc+'"><div class="menuText"><span>'+menu.name+'</span><span class="fa fa-search" style="position:realitive;float:right;vertical-align:middle;"></span></div><div class="space"></div></div></div>'
//alert(menu.subtitle.length);
setMenuDiv += '<ul class="subMenu1">';
for (var subtitle1 of menu.subtitle) {
sub1Inc++;
sub2Inc = 0;
sub3Inc = 0;
sub4Inc = 0;
sub5Inc = 0;
setMenuDiv += '<li id="m_' + mainInc + '_' + sub1Inc + '" data-filename="' + ((subtitle1.fileName != "") ? subtitle1.fileName : "") + '" data-submenu="' + subtitle1.subtitle.length + '">';
setMenuDiv += '<span>' + subtitle1.name + '</span>';
if (subtitle1.subtitle.length != 0 && subtitle1.subtitle.length != undefined) {
setMenuDiv += '<span class="down_arrow"><i class="fa fa-chevron-down"></i></span>';
}
setMenuDiv += '</li>';
//setMenuDiv +='<div class="menuList subMenu1" id="m_'+mainInc+'_'+sub1Inc+'"><p>'+subtitle1.name+'</p></div>'
setMenuDiv += '<ul class="subMenu2">';
for (var subtitle2 of subtitle1.subtitle) {
sub2Inc++;
sub3Inc = 0;
sub4Inc = 0;
sub5Inc = 0;
setMenuDiv += '<li id="m_' + mainInc + '_' + sub1Inc + '_' + sub2Inc + '" data-filename="' + ((subtitle2.fileName != "") ? subtitle2.fileName : "") + '" data-submenu="' + subtitle2.subtitle.length + '">';
setMenuDiv += '<span>' + subtitle2.name + '</span>';
if (subtitle2.subtitle.length != 0 && subtitle2.subtitle.length != undefined) {
setMenuDiv += '<span class="down_arrow"><i class="fa fa-chevron-down"></i></span>';
}
setMenuDiv += '</li>';
//setMenuDiv +='<div class="menuList subMenu2" id="m_'+mainInc+'_'+sub1Inc+'_'+sub2Inc+'"><p>'+subtitle2.name+'</p></div>'
setMenuDiv += '<ul class="subMenu3">';
for (var subtitle3 of subtitle2.subtitle) {
sub3Inc++;
sub4Inc = 0;
sub5Inc = 0;
setMenuDiv += '<li id="m_' + mainInc + '_' + sub1Inc + '_' + sub2Inc + '_' + sub3Inc + '" data-filename="' + ((subtitle3.fileName != "") ? subtitle3.fileName : "") + '" data-submenu="' + subtitle3.subtitle.length + '">';
setMenuDiv += '<span>' + subtitle3.name + '</span>';
if (subtitle3.subtitle.length != 0 && subtitle3.subtitle.length != undefined) {
setMenuDiv += '<span class="down_arrow"><i class="fa fa-chevron-down"></i></span>';
}
setMenuDiv += '</li>';
//setMenuDiv +='<div class="menuList subMenu3" id="m_'+mainInc+'_'+sub1Inc+'_'+sub2Inc+'_'+sub3Inc+'"><p>'+subtitle3.name+'</p>'
setMenuDiv += '<ul class="subMenu4">';
for (var subtitle4 of subtitle3.subtitle) {
sub4Inc++;
sub5Inc = 0;
setMenuDiv += '<li id="m_' + mainInc + '_' + sub1Inc + '_' + sub2Inc + '_' + sub3Inc + '_' + sub4Inc + '" data-filename="' + ((subtitle4.fileName != "") ? subtitle4.fileName : "") + '" data-submenu="' + subtitle4.subtitle.length + '">';
setMenuDiv += '<span>' + subtitle4.name + '</span>';
if (subtitle4.subtitle.length != 0 && subtitle4.subtitle.length != undefined) {
setMenuDiv += '<span class="down_arrow"><i class="fa fa-chevron-down"></i></span>';
}
setMenuDiv += '<span class="down_arrow"><i class="fa fa-chevron-down"></i></span>';
setMenuDiv += '</li>';
setMenuDiv += '</ul>';
//setMenuDiv +='<div class="menuList subMenu4" id="m_'+mainInc+'_'+sub1Inc+'_'+sub2Inc+'_'+sub3Inc+'_'+sub4Inc+'"><p>'+subtitle4.name+'</p></div>'
}
setMenuDiv += '</ul>';
}
setMenuDiv += '</ul>';
}
setMenuDiv += '</ul>';
}
}
setMenuDiv += '</li>';
setMenuDiv += '</ul>';
setMenuDiv += '</ul>';
setMenuDiv += '<div class="space"></div>';
} //*/
loadContent(setMenuDiv);
});
}
function loadContent(aValues) {
document.getElementById("tocmenu").innerHTML += aValues;
$('li').click(function (evt) {
$("#" + this.id).css("background-color", "#00FF00");
var subMenuNum = $(this).data("submenu");
//console.log($(evt.target).nodeName());
if ($(this).data("name") != "" && $(this).data("filename") != "") {
//$(".textpanelTitle").innerHTML = $(evt.target).children().text();
$("#loadTextContent").attr("src", 'Menus/' + $(this).data("filename"));
}
var splitId = this.id.split("_");
if (splitId.length == 2) {
showMenus('m_' + splitId[1], subMenuNum);
} else if (splitId.length == 3) {
showMenus('m_' + splitId[1] + "_" + splitId[2], subMenuNum);
} else if (splitId.length == 4) {
showMenus('m_' + splitId[1] + "_" + splitId[2] + "_" + splitId[3], subMenuNum);
} else if (splitId.length == 5) {
showMenus('m_' + splitId[1] + "_" + splitId[2] + "_" + splitId[3] + "_" + splitId[4], subMenuNum);
}
evt.preventDefault();
});
}
function showMenus(aName, aLoopValue) {
for (var a = 1; a <= aLoopValue; a++) {
$('#' + aName + "_" + a).parent().css("display", "block");
}
}
loadMenu();
}); // JavaScript Document
window.addEventListener('message', (event) => {
console.log("window Post Message: ");
console.log(event.data);
var getObj = event.data;
if (getObj.F2D != "") {
$("#loadVideoContent").attr("src", 'Menus/' + getObj.F2D);
} else if (getObj.F3D != "") {
$("#loadVideoContent").attr("src", 'Menus/' + getObj.F3D);
} else if (getObj.FAR != "") {
// code here
} else if (getObj.FVR != "") {
// code here
} else if (getObj.FPR != "") {
// code here
}
//this.searchfun(event.data.faultcode);
});
css file:
@charset "utf-8";
/* CSS Document */
html,body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.header
{
width: 100%;
background-color: #2C405A;
}
.header span
{
font-family: "SF Pro Display";
font-size: 10px;
text-align: center;
color: white;
}
/*div{
width: 100%;
height: 100%;
}*/
#content
{
background-color: white;
height: 100%;
}
iframe
{
width: 99%;
padding-top:2px;
height: 100%;
border: none;
}
header
{
height: 6%;
background:#2c405a;
}
.split {
position: relative;
top:0;
float: left;
}
.textContent {
min-width: 37%;
max-width: 39%;
height: 100%;
left: 0%;
background-color: white;
border-right: .1em solid #1c293b;
}
.right {
display:inline-table;
vertical-align:middle;
height: 100%;
width: 40.91%;
right: 0%;
background-color: white;
}
.menu {
width: 20%;
height: 100%;
left: 0;
background-color: #1c293b;
}
.menuList
{
max-height: 86.75%;
overflow: auto;
cursor: pointer;
}
.menuText,.mainMenu
{
display: inline-table;
color: #89929e;
}
.menuText p
{
padding-left: 1%;
}
* {
box-sizing: border-box;
}
div.search input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
div.search button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
div.search button:hover {
background: #0b7dda;
}
div.search::after {
content: "";
clear: both;
display: table;
}
.menuList ul
{
width: 100%;
list-style: none;
margin: 0;
padding: 0;
border: none;
line-height: 30px;
}
.menuList li
{
list-style: none;
margin: 0;
padding: 0;
border: none;
line-height: 30px;
}
.menu_text
{
padding-left: 5px;
text-indent: 10px;
}
.down_arrow
{
padding-right: 10px;
float: right;
}
.mainMenu li span
{
padding-left: 5px;
text-indent: 10px;
}
.subMenu1 li span
{
padding-left: 10px;
text-indent: 10px;
}
.subMenu2 li span
{
padding-left: 15px;
text-indent: 10px;
}
.subMenu3 li span
{
padding-left: 20px;
text-indent: 10px;
}
.subMenu4 li span
{
padding-left: 25px;
text-indent: 10px;
}
.subMenu1,.subMenu2,.subMenu3,.subMenu4
{
display: none;
}
.space
{
height: 1px;
background: #89929e;
}
.textpanelTitle
{
margin-top: 5px;
margin-left: 5px;
width: 98%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #323639;
color: white;
resize: vertical;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-size: 18px;
}
pls help me how can i close the tree menu when click again same button
This helped me very mach. Thank you.
Any opinion on firebase?
Hey guys, I have created a form validation in my ionic 4 app, now I want the data keyed in the form to be submitted and send to my gmail as an inbox. For example, whenever a user key in the form, I will be able to receive an email every time he/she submits a form. How do I achieve that?
If there will come new or updates versions on essays you should have them in a DB like firebase. If it will be static, you can just do it thrugh sqlite
Oh, I have new essays coming in, so looks like I have to use firebase. Thanks for the advice!
private submenus: {name:string, active:boolean}[] = [];
should work too and is at least a bit more typed then not typed at all
Hi all ! Could anyone suggest please, if exist way to pause and resume download big file in ionic 4 ?
Is there a way to pause an active download when the app is closed or abort internet and as soon as the app
relaunches it could resume from last downloaded position using any Native plugin.
Hi,
I am dealing with the same case than you, reading the contacts from the phone and checking if they are registered in the backend server. I am currently struggling to get acceptable performance just reading the contacts from the phone. Have you solved your issue with th this plugin https://github.com/dbaq/cordova-plugin-contacts-phone-numbers ?
How do instantiate it in ionic ?
Thank you
I created a class that extends from the @ionic/angular node_module. However, AOT doesn’t like it one bit.
Does NOT compile:
import {
ChangeDetectorRef, ComponentRef, ElementRef, Injectable, NgModule, NgZone
} from '@angular/core';
import { IonProgressBar, IonToolbar } from '@ionic/angular';
import { DomService } from '../services/dom.service';
export class IonProgressBarExtended extends IonProgressBar {
constructor(
private c: ChangeDetectorRef,
private r: ElementRef<any>,
public z: NgZone,
private componentRef: ComponentRef<typeof IonProgressBar>,
private domService: DomService
) {
super(c, r, z);
}
// ...
}
Does compile, but obviously doesn’t work:
export class IonProgressBarExtended {
constructor(
private c: ChangeDetectorRef,
private r: ElementRef<any>,
public z: NgZone,
private componentRef: ComponentRef<typeof IonProgressBar>,
private domService: DomService
) {
// super(c, r, z);
}
// ...
}
The ProgressBarModule is imported in the app.module.ts and it works fine with ng serve and non-prod builds. However, once the AOT is called with the --prod build flag, I get the following error:
Cannot determine the module for class IonProgressBarExtended in /Users/Reed/source/repos/IonicSideMenuPOC/src/app/shared/controllers/progress-bar-controller.ts! Add IonProgressBarExtended to the NgModule to fix it.
I have confirmed this on a completely new Ionic project, and have confirmed that it’s not a duplicate import issue. Has anybody else dealt with this?
Time and effort. To convert an entire app just for a minor bug its not a good ideea. Just rebuild a well tested app is the best path.
you first import the icon
import { trash, camera, cloudUpload } from "ionicons/icons";
then use it
<IonButton onClick={uploadImage} color="secondary">
<IonIcon slot="icon-only" icon={cloudUpload}></IonIcon>
</IonButton>
code? can you provide a sample
Me ajudou aqui hoje ==> 16/01/2020 USA 2:20