Quantcast
Channel: Ionic Forum - Latest posts
Viewing all 228535 articles
Browse latest View live
↧

Help needed: A "solved" problem with end tags

July 6, 2017, 6:10 am
$
0
0

Hi everyone :slight_smile:

I'm new to Ionic, so I started out by following the Ionic Crash Course (2.x or above) on YT. Up until now I have never used HTML or Java, just C++ and Python.
While following it, you have to implement a list with buttons (around 17:20-ish).
I verbatim copied the code and the next code of the follwing minutes which creates the necessary references (until 19:00).

The code looks like this:
"

Home




{{ item }}


"

But instead of showing me the list it gave me the following error:
"Runtime Error
Template parse errors: Unexpected closing tag "ion-content". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" [Error ->] "): ng:///AppModule/Homepage.html@19:0"

After reading this, following the given link and searching this forum I came up with the solution that must soomehow imply an and just deleted the in the code above (last line) which worked. I felt like this was a pretty ugly solution, since the is missing, messing up the scope checks in my editor etc.

My questions are: Why does this work? Are there more beautiful solutions for this?

Background info:
Below the Stack in the Error it says:
"syntaxError@http://localhost:8101/build/main.js:76640:34 DirectiveNormalizer.prototype.normalizeLoadedTemplate@http://localhost:8101/build/main.js:88457:19 DirectiveNormalizer.prototype.normalizeTemplateSync@http://localhost:8101/build/main.js:88433:16 DirectiveNormalizer.prototype.normalizeTemplate@http://localhost:8101/build/main.js:88407:38 CompileMetadataResolver.prototype.loadDirectiveMetadata@http://localhost:8101/build/main.js:89345:49 CompileMetadataResolver.prototype.loadNgModuleDirectiveAndPipeMetadata/<@http://localhost:8101/build/main.js:89541:48 CompileMetadataResolver.prototype.loadNgModuleDirectiveAndPipeMetadata@http://localhost:8101/build/main.js:89540:13 JitCompiler.prototype.loadModules/<@http://localhost:8101/build/main.js:100736:34 JitCompiler.prototype.loadModules@http://localhost:8101/build/main.js:100735:9 JitCompiler.prototype.compileModuleAndComponents@http://localhost:8101/build/main.js:100689:47 JitCompiler.prototype.compileModuleAsync@http://localhost:8101/build/main.js:100651:18 PlatformRef_.prototype.bootstrapModuleWithZone@http://localhost:8101/build/main.js:5089:16 PlatformRef.prototype.bootstrapModule@http://localhost:8101/build/main.js:5075:16 @http://localhost:8101/build/main.js:74909:1 webpack_require@http://localhost:8101/build/main.js:20:12 @http://localhost:8101/build/main.js:66:18 @http://localhost:8101/build/main.js:1:11"

And

Ionic Framework: 3.5.0
Ionic App Scripts: 1.3.12
Angular Core 4.1.3.
Angular Compiler CLI: 4.1.3.
Node: 6.11.0
Os Platform: macOS Sierra
Navigator Platform: MacIntel

↧
Search

Tabs: programmatically remove the highlight after a push

July 6, 2017, 6:10 am
$
0
0

Ok, I was working on it for awhile, but I've just found the solution on my own :slight_smile:
this.navCtrl.parent._tabs[0].isSelected=false;
Thank you anyway

↧
↧

Is it a problem in or or the combination of both?

July 6, 2017, 6:12 am
↧

Images dont show, ionic bug?

July 6, 2017, 6:12 am
$
0
0

ok, asked a friend. the answer:
in css file we need to put / before the word assets:
...url('/assests/dp.png');

↧

How to get the popover arrow to the left of the popover list?

July 6, 2017, 6:12 am
$
0
0

I have a popover opening by a select. When the popover opens, the arrow displayed in ios is displayed on the top of the popover. How can I get the arrow to the left side of the popover?

<ion-select interface="popover">
  <ion-option>Test</ion-option>
  <ion-option>Test2</ion-option>
</ion-select>
↧
↧

Ionic - Dynamic forms. Formbuilder,group is triggering after some delay and generates error

July 6, 2017, 6:25 am
$
0
0

Hi,

I have to load a json to generate form dynamically. It generates an error on first load.

Cannot find control with name:

There is a dropdown, which triggers a reload of data for form generation. The subsequent form generations work fine. Can someone help in identifying the error of first load please?

Code snippets of TS, view and json are as under.

JS/TS

updateForm(v){
JSON.parse(v.data.formhtml).formhtml.forEach(e=>{
  e.field.forEach(ei=>{
    this.formData[ei.name] = [''];
    if(ei.validation == 'required')
      this.formData[ei.name].push(Validators.required);
  });
});
this.consform = this.formBuilder.group(this.formData);
this.formfields = JSON.parse(v.data.formhtml).formhtml;
}

Pages

form *ngIf="consform" [formGroup]="consform" (ngSubmit)="createItem()">
  <label class="item item-input item-select">
    <div class="input-label">
    <select formControlName="type"
        [(ngModel)]="selectedForm"

        (ngModelChange)="updateForm($event)">
        <option  *ngFor="let form of loadedForms;  let formIndex = index "  [ngValue]="form"
         >  {{form.formname}}</option>

    </select>
    </div>
  </label>
  <hr>
  <span  *ngFor="let fm of formfields; let fi=index">
    {{fm.title}}
    <ion-list>
      <ion-item *ngFor="let el of fm.field">
        <span>{{el.label}}</span><ion-input type='text' placeholder="{{el.label}}" [formControlName]=el.name></ion-input>
      </ion-item>
    </ion-list>
  </span>
</form>

JSON 

{
	"formhtml": [{
		"title": "From",
		"field": [{
				"label":"Name",
				"name": "fname",
				"type": "text",
				"validation": "required"
			},
			{
				"label":"Port",
				"name": "fportname",
				"type": "text",
				"validation": "required"
			}]
}]
}

Thanks.

↧

Image not displaying while displaying contacts

July 6, 2017, 6:34 am
$
0
0

image.png1366x768 187 KB

I am getting the following output ...
it gives a null value on the contact.photos..

code-

   for (var i=0 ; i < contacts.length; i++){
     if(contacts[i].displayName !== null){
       var obj = {};
       obj["name"] = contacts[i].displayName;
       obj["number"] = contacts[i].phoneNumbers[0].value;
       obj["image"]=  contacts[i].photos;
       console.log(contacts[i].photos);
        this.contacts.push(obj)
             console.log(contacts[i].photos);
             console.log(obj);
        }
        console.log(obj);
    }
    this.groupContacts(this.contacts);
  })
}

how can i resolve this issue

↧

Reusing components?

July 6, 2017, 6:59 am
$
0
0

I'm a bit stuck on the reusing components part.

I have a notification part of a template which is needed in every template. So i asked before how to do this. Someone suggested making it a seperate component. So I'm trying to do this but I'm a bit stuck on how to exchange data between the two components.

News.ts:

export class News {
    notification: object = {image: '', title: '', content: ''};

    constructor(public navCtrl: NavController, public http: Http, public globalProvider: GlobalProvider, public Notification: Notification, public loadingCtrl: LoadingController, public network: Network) {

        /**
         * Only do request when online.
         */
        if (globalProvider.isOnline()) {
            this.sendHTTPRequest(loadingCtrl, globalProvider);
        } else {
            this.notification = globalProvider.notification['internet'];
        }

I have a provider that has the notification content.

global.ts

mport {Injectable} from '@angular/core';
import {App} from 'ionic-angular';

@Injectable()
export class GlobalProvider {
    notification: object;

    constructor(public app: App) {
        this.notification = {
            internal: {
                image: 'assets/img/interne-fout.svg',
                title: 'Er is een interne fout',
                content: 'Probeer het opnieuw, als het probleem aanhoudt neem contact op'
            },
            internet: {
                image: 'assets/img/geen-data.svg',
                title: 'Je hebt geen verbinding',
                content: 'Check je internetconnectie en probeer het nogmaals'
            }
        };
    }

    isOnline() {
        return navigator.onLine;
    }
}

And i just created these 2:

notification.ts

import { Component } from '@angular/core';

// Providers
import {GlobalProvider} from '../../providers/global';

@Component({
    selector: 'notification',
    templateUrl: 'notification.html'
})

export class Notification {
    notification: object = {image: '', title: '', content: ''};

    constructor(public globalProvider: GlobalProvider) {

    }
}

notification.html

<div class="notification" *ngIf="notification">
<img [src]="notification?.image">
<span>{{ notification?.title }}</span>
{{ notification?.content }}
</div>

I'm not sure on how I tell the news.ts that the notification data should go to notification.ts/html

↧
Search

Reusing components?

July 6, 2017, 7:19 am
$
0
0

Ow aparently i needed to add

@Input() notification: any[];

in notification.ts

↧
↧

Reusing components?

July 6, 2017, 7:23 am
$
0
0

Can you show how the code ended? Please!

↧

Reusing components?

July 6, 2017, 7:25 am
$
0
0

Everything stayed the same except for notification.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'notification',
    templateUrl: 'notification.html'
})

export class Notification {
    @Input() notification: any[];
}

Ow and I changed <notification> in news.html to:

    <notification [notification]="notification"></notification>
↧

Reusing components?

July 6, 2017, 7:26 am
↧

Ionic 3 error adding platform

July 6, 2017, 7:31 am
$
0
0

You are trying to add the Android 6.2.3 Platform but only have the 6.2.2 available!

↧
↧

Ionic 3 error adding platform

July 6, 2017, 7:33 am
↧

TypeScript error: Ionic 1.2.1

July 6, 2017, 7:36 am
$
0
0

package.json:

{
  "dependencies": {
    "@angular/compiler-cli": "^4.2.5",
    "@angular/tsc-wrapped": "^4.2.5",
    "@ionic/app-scripts": "^1.3.12",
    "angular2": "2.0.0-beta.15",
    "autoprefixer": "^7.1.1",
    "es6-shim": "^0.35.0",
    "ionic": "^1.2.1",
    "ionic-angular": "2.0.0-beta.6",
    "ionic-native": "^1.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.2"
  },
  "devDependencies": {
    "@ionic/cli-plugin-cordova": "1.4.0",
    "@ionic/cli-plugin-gulp": "1.0.1",
    "@ionic/cli-plugin-ionic-angular": "1.3.1",
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.1.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^1.0.1",
    "run-sequence": "1.1.5"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-plugin-datepicker",
    "cordova-plugin-geolocation",
    "cordova-plugin-spinner-dialog"
  ],
  "cordovaPlatforms": [
    "ios",
    "android"
  ],
  "name": "ionic-staffind",
  "description": "ionic-staffind: An Ionic project"
}
↧
Search

How to change the phone language

July 6, 2017, 7:46 am
$
0
0

Hi

Is there any solution to change the phone language in the phone setting by ionic/crodova.

Thank you

↧

Ionic error adding platform

July 6, 2017, 7:58 am
↧
↧

NavController cache problem

July 6, 2017, 8:01 am
$
0
0

Hi everyone,
I'm going to disable native back button in Android and implement its function using nav.pop.
By the way NavController inject instance is cached on the page.
What is the best way to achieve my goal?
Sorry for my bad english.

↧

Ionic ion-col same height as width

July 6, 2017, 8:03 am
$
0
0

Hello Guys,

how can i make a ion-col the same height as width?

TY

↧

Ionic and highcharts modules

July 6, 2017, 8:15 am
$
0
0

For me a slightly different approach worked:
import * as highcharts from 'highcharts';
declare var require:any;

and in the imports of the module:
ChartModule.forRoot(highcharts, require('highcharts/modules/map')),

↧
Viewing all 228535 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>