Develop Reference

Getting Play button to play a stream link

Just started using Ionic 4 and Angular so a very new beginner :)
I bought a UI Template from code canyon but never realised I had to code the music playing part of it. Anyway I have been searching to get a stream playing but failed. I found a post which said to just use a HTML5 code to stream music.
When I click Play the music never plays. Where am I going wrong ? My player.page.ts looks like this :
import { Component, OnInit, Input } from '#angular/core';
import { ModalController } from '#ionic/angular';
#Component({
selector: 'app-player',
templateUrl: './player.page.html',
styleUrls: ['./player.page.scss'],
})
export class PlayerPage implements OnInit {
#Input() data: any;
stream: any = null;
valueVolume = 50;
constructor( public modalController: ModalController) { }
audio: any;
ngOnInit() {
this.audio = new Audio();
this.audio.src = 'http://tbvr.noip.me:8000/';
this.audio.load();
}
clickButtonMusic() {
}
closeModal() {
this.modalController.dismiss();
}
playAudio() {
this.audio.play();
this.audio.loop = false;
}
stopAudio() {
this.audio.pause();
}
volumen(event) {
this.valueVolume = event.detail.value;
this.stream.volume = this.valueVolume / 100;
}
}
and my player.page.html looks like this :
<ion-header no-border>
<ion-toolbar>
<ion-buttons slot="start" class="chevron">
<ion-button
class=" circle-button ion-no-padding"
fill="clear"
shape="round"
color="default"
(click)="closeModal()"
>
<i class="icon-chevron-down"></i>
</ion-button>
</ion-buttons>
<ion-title> Live Now</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-text-center">
<div class="h-100 vertical-align">
<div
class="image-container"
[ngStyle]="{'background-image': 'url('+ data?.photo +')'}"
></div>
<div class="py">
<h4>{{ data?.title }}</h4>
<p>{{ data?.text }}</p>
</div>
<ion-buttons>
<ion-button
class="media-button circle-button ion-no-padding"
fill="clear"
size="large"
shape="round"
color="default"
>
<i class="icon-share-2"></i>
</ion-button>
<ion-button class="play-button" (click)="playAudio()"></ion-button>
<ion-button class="stop-button" (click)="stopAudio()"></ion-button>
<ion-button
class="media-button circle-button ion-no-padding"
fill="clear"
size="large"
shape="round"
color="default"
>
<i class="icon-star"></i>
</ion-button>
</ion-buttons>
<ion-range
min="0"
max="100"
color="secondary"
[value]="valueVolume"
(ionChange)="volumen($event)"
>
<ion-label slot="start">
<i class="icon-volume-1"></i>
</ion-label>
<ion-label slot="end">
<i class="icon-volume-2"></i>
</ion-label>
</ion-range>
</div>
</ion-content>
Thanks for any help anyone can give me.
Kevin

You can use Ionic Cordova native plugins. These plugins are available in Ionic framework website.Install the plugin and follow the simple instructions provide in the doc for activating the plugin. Some plugins want special permission to work in Ios(eg:Geocoder). So kindly read the doc carefully.
https://ionicframework.com/docs/native/native-audio
Here I am attaching the link of Ionic Native audio player plugin link. Don't forget to import the plugin in app.module.ts file after successfull installation , otherwise it will start to show error like staticInjectError

Managed to get it to play fine.
audio: any; needed moving to onInit
Just that when I hit stop the music stops but seems to still be downloading from the server.

side-menu(Uncaught TypeError: Cannot read property 'name' of undefined)

i try to add side menu in my app but give me this error message in console (Uncaught TypeError: Cannot read property 'name' of undefined)
this is homepage.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle icon-only>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title>
Menus
</ion-title>
</ion-navbar>
</ion-header>
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item (click)="openPage(homePage)">
Home
</button>
<button ion-item (click)="openPage(sign)">
sign
</button>
<button ion-item menuClose (click)="closeMenu()">
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>
this is homepage.ts
export class HomePage {
private rootPage;
private sign;
constructor(public navCtrl: NavController, public menu:MenuController) {
menu.enable(true);
this.rootPage = HomePage;
this.sign = SignupPage;
}
openPage(p) {
this.rootPage = p;
}
}
this a picture for error
this is main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
import { platformBrowserDynamic } from '#angular/platform-browser-
dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
why give me error for name?? any help please

Calculate price from input text using ionic

I want to create a simple shopping list app with the price.
This is my shopping.html
<ion-header>
<ion-navbar color="secondary">
<ion-title align="center">
My Shopping Tracker
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="addItem()"><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.type}}</ion-item>
</ion-list>
</ion-content>
<ion-content>
<ion-list>
<ion-item-sliding *ngFor="let item of items">
<ion-item>
<h2>{{item.today}}</h2>
<p>{{item.type}}</p>
<p>{{item.total}}</p>
</ion-item>
<ion-item-options side="right">
<button ion-button (click)="delete(item)">
<ion-icon name="trash"></ion-icon>Delete
</button>
<button ion-button (click)="edit(item)">
<ion-icon name="redo"></ion-icon>Edit
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
<ion-footer>
<ion-toolbar >
<ion-title>{{total}}</ion-title>
</ion-toolbar>
</ion-footer>
This is the addshopping.html
<ion-header>
<ion-toolbar color="secondary">
<ion-title>
Add Shopping List
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Date:</ion-label>
<ion-datetime displayFormat="DD-MM-YYYY HH:mm" [(ngModel)]="today"></ion-datetime>
</ion-item>
<ion-item>
<ion-label floating>Type:</ion-label>
<ion-input type="text" [(ngModel)]="type"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Description:</ion-label>
<ion-input type="text" [(ngModel)]="description"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Total Amount:</ion-label>
<ion-input type="text" [(ngModel)]="total"></ion-input>
</ion-item>
</ion-list>
<button full ion-button color="secondary" (click)="saveItem()">Save</button>
</ion-content>
This is my addlist.ts
import { Component } from '#angular/core';
import { NavController, ViewController } from 'ionic-angular';
#Component({
selector: 'page-addlist',
templateUrl: 'addlist.html'
})
export class AddListPage {
type: string;
description: string;
today: Date;
total: price;
constructor(public navCtrl: NavController, public view: ViewController) {
}
saveItem(){
let newItem = {
type: this.type,
today: this.today,
description: this.description,
total: this.total,
};
this.view.dismiss(newItem);
}
close(){
this.view.dismiss();
}
}
How do I calculate the total price for each time I add up new item? and display it on the footer? I uploaded the image.
Do I need to change from string to number values? Or stay it as string?

You can use a function that returns the total price, like this
private getTotalPrice() {
let totalPrice = 0;
for (let item of itens) {
totalPrice += Number.parseFloat(item.total);
}
return totalPrice;
}
and then u can call it in the footer
[(ngModel)]="getTotalPrice()"

Angular 2 Dynamic Template Directives does not work

I have a component which takes in a dynamic template which looks like this:
<ion-list>
<ion-item-sliding *ngFor="let entity of entityList" #item>
<ion-item (click)="navigateToDetail(entity.id)">
<template [ngTemplateOutlet]="template" [ngOutletContext]="{entity: entity}"></template>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" *ngIf="config && config.canDelete" (click)="delete(entity.id)">
<ion-icon name="trash"></ion-icon>Delete
</button>
<button ion-button color="dark" >
<ion-icon name="more"></ion-icon>More
</button>
</ion-item-options>
</ion-item-sliding>
<ion-list-header>
<button *ngIf="config && config.canCreate" (click)="create()"
ion-button full color="secondary">
Create New<ion-icon name="add"></ion-icon>
</button>
</ion-list-header>
</ion-list>
and the typescript looks like so:
export class PageListBaseComponent<T extends IHasId> {
#Input() template: TemplateRef<any>;
#Input() detailPageType: any;
#Input() config: PageListConfiguration
#Input() set baseProvider(provider: ProviderBase<T>) {
provider.getList().subscribe(entities => {
this.entityList = entities;
console.log(entities);
});
}
public entityList: T[];
constructor(public navCtrl: NavController, public navParams: NavParams) {
console.log("ctor");
}
create() {
if (this.config && this.config.canCreate) {
//TODO: initialize entity
let entity = {}
this.navCtrl.push(this.detailPageType, { entity });
}
}
delete(id: number) {
console.log(id);
if(this.config && this.config.canDelete)
{
this.baseProvider.deleteById(id).subscribe(result => {
console.log(result);
});
}
}
navigateToDetail(id: number) {
this.navCtrl.push(this.detailPageType, { id })
}
}
And then I have a template that looks like so:
<template #myTemplate let-entity="entity">
<ion-item>
<ion-avatar item-left>
<img src="http://modexenergy.com/wp-content/themes/modex_wp/img/avatar.png">
</ion-avatar>
<h2>{{ entity.email }}</h2>
<ion-icon name="arrow-forward" item-right></ion-icon>
</ion-item>
</template>
My issue is the <ion-item> Right now I need to use it twice which I do not want to do, For some reason if i try and render the items dynamically they do not appear in the list, so I need to leave <ion-item> wrapping the template, that would be fine, except the directives don't respect there parent. Meaning if I use the item-left directive in a template, and the template does not include an <ion-item> my directives are ignored.
What can I do to fix this, if I can get away with out using both that would be nice, but if not is there a way render the first <ion-item> with no style?

Ionic2-array not updating on html side

I am new in Ionic2 and Angular2 trying to update my array at front side but its not updating.Moreover its updating perfectly at backend (ts),checked using console. need your help
My Component:
import { Component } from '#angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
#Component({
selector: 'page-modal-filter',
templateUrl: 'modal-filter.html'
})
export class ModalFilterPage {
public fil=[];
public BRANDNAME: any;
public srts:any;
constructor(public nav: NavController, public viewCtrl: ViewController, public navParams: NavParams) {
this.fil = [];
this.srts="ABCD";
if (navParams.get('tabName') == 'filter') {
let data = navParams.get('data');
data.map(d => {
for (let op in d.OPTIONGROUP) {
for (let x in d.OPTIONGROUP[op]) {
if (x != "UPC") {
if (!this.fil[x]) {
this.fil[x] = [];
}
if (this.fil[x].indexOf(d.OPTIONGROUP[op][x]) == -1) {
this.fil[x].push(d.OPTIONGROUP[op][x]);
}
}
}
}
})
console.log(this.fil);
}
}
closeModal() {
// this.nav.pop();
this.viewCtrl.dismiss(true);
}
}
"fil" array not showing on frontside of html but console show its perfectly.
My html code:
fil array not showing
<ion-header>
<ion-navbar color="primary">
<ion-buttons start>
<button ion-button (click)="closeModal()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Search Result(105)</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="tab-filter">
<!--filter list-->
<pre>{{fil}}</pre>
<pre>{{srts}}</pre>
<ion-list class="list-no-border">
<ion-item>
<ion-label> PLACE</ion-label>
<ion-select>
<ion-option value="">All Regions</ion-option>
<ion-option value="vn">Vietnam</ion-option>
</ion-select>
</ion-item>
<ion-item class="price-ranger">
<ion-label>Price</ion-label>
<ion-input type="text" placeholder="Min"></ion-input>
-
<ion-input type="text" placeholder="Max"></ion-input>
</ion-item>
<ion-item>
<ion-label>Free shipping</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Once pice only</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Sale items</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
</ion-list>
</ion-content>
<!--Footer buttons-->
<ion-footer class="category">
<ion-toolbar position="bottom">
<ion-buttons end>
<button ion-button (click)="closeModal()">
CANCEL
</button>
<button ion-button (click)="closeModal()">
<span ion-text color="gray">APPLY</span>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>

Your {{fil}} is an array yet you are declaring it on the view as a simple property. Angular does not automatically interpret an array with string interpolation.
For arrays you need to use *ngFor
So if you want like you have stated is being displayed in your console.log you could write something like
<div *ngFor="let item of fil">
<ion-item *ngFor="let color of item.COLOR">
{{color.propertyName}}
<ion-item>
<ion-item *ngFor="let size of item.SIZE">
{{color.propertyName}}
<ion-item>
</div>

I resolved my issue by using
this.fil = [];
to
this.fil={}