Angular 2 inject HTML into inline template - javascript

I'm trying to inject html into an inline template. Mostly because I'm lazy and don't feel like making a component.
I have a an inline template implemented the following way:
<ion-slide *ngFor="let entity of serviceRequests">
<ion-item>
<ion-col>
<ion-note>[Skill Name]{{skillTypeOptions.resolveName(entity.skillId)}}</ion-note>
</ion-col>
</ion-item>
<template [ngTemplateOutlet]="offerTemplate" [ngOutletContext]="{entity: entity.Offer, title: 'Offer'}">
</template>
<template [ngTemplateOutlet]="offerTemplate" [ngOutletContext]="{entity: entity.Counter, title: 'Counter'}">
</template>
</ion-slide>
</ion-slides>
<template #offerTemplate let-entity="entity" let-title="title">
<ion-card>
<ion-item>
<ion-row>
<ion-col>
<ion-note>{{title}}</ion-note>
</ion-col>
<ion-col>
<ion-note>For {{entity.price}} $</ion-note>
</ion-col>
</ion-row>
</ion-item>
<ion-card-content>
{{ entity.messageText }}
</ion-card-content>
</ion-card>
</template>
is there a way I can pass another template into the template to nest templates?

I figured out how to do it. You just have to pass in the template as a parameter.
First add a parameter to the parent template, let-footerTemplate="footerTemplate":
<template #offerTemplate let-entity="entity" let-title="title" let-footerTemplate="footerTemplate">
<ion-card>
<ion-item>
<ion-row>
<ion-col>
<ion-note>{{title}}</ion-note>
</ion-col>
<ion-col>
<ion-note>For {{entity.price}} $</ion-note>
</ion-col>
</ion-row>
</ion-item>
<ion-card-content>
{{ entity.messageText }}
</ion-card-content>
<ion-item>
<template [ngTemplateOutlet]="footerTemplate" [ngOutletContext]="{entity: entity}">
</template>
</ion-item>
</ion-card>
</template>
Then you can display the template variable in the ngTemplate directive again.
and the usage would look like so:
<template [ngTemplateOutlet]="offerTemplate" [ngOutletContext]="{entity: entity, title: 'Counter', footerTemplate:footerTemplate}">
</template>

Related

How to make of several forms one form?

I have set up several form that takes info for an upload logic: like one takes then picture, one the description, one other setting. Now I want that this is all stored in one single form, but while it still worked when using different form now I get this error:
ERROR TypeError: Cannot read property 'controls' of undefined
I have no idea why is that. I also cannot submit a new description which I want to make with <div (ngSubmit)="addTag()">
Here is my code:
html:
<form [formGroup]="categoryForm">
<ion-grid class="white">
<ion-row class="checkbox-tags rounded-checkbox-tags">
<ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
<ion-icon name="images"></ion-icon>
<ion-checkbox formControlName="tag_1"></ion-checkbox>
</ion-item>
<ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
<ion-icon name="camera"></ion-icon>
<ion-checkbox formControlName="tag_2"></ion-checkbox>
</ion-item>
</ion-row>
</ion-grid>
<ion-row class="range-item-row">
<ion-col size="12">
<div class="range-header">
<span class="range-value">{{ rangeForm.controls.dual.value.lower }}</span>
<span class="range-label">temperature</span>
<span class="range-value">{{ rangeForm.controls.dual.value.upper }}</span>
</div>
</ion-col>
<ion-col size="12">
<ion-range mode="md" class="range-control" formControlName="dual" color="danger" pin="true" dualKnobs="true" debounce="400"></ion-range>
</ion-col>
</ion-row>
<div (ngSubmit)="addTag()">
<ion-item>
<ion-input [disabled]="tagList?.length > 0" mode="md" formControlName="category" clearInput="true" placeholder="Tag" name="tagValue"></ion-input>
<ion-button [disabled]="!categoryForm.valid || tagList?.length > 0" type="submit" icon-only>
<ion-icon name="checkmark"></ion-icon>
</ion-button>
</ion-item>
</div>
</form>
<ion-chip class="chip" color="dark" *ngFor="let tag of tagList; let i = index">
<ion-icon name="pricetag"></ion-icon>
<ion-label class="set-label">{{ tag }}</ion-label>
<ion-icon name="close-circle" (click)="removeChip(i)"></ion-icon>
</ion-chip>
</ion-content>
<ion-footer>
<ion-button [disabled]="!tagList?.length > 0" (click)="confirm()" expand="block" type="submit">POST</ion-button>
</ion-footer>
typescript:
categoryForm: FormGroup;
...
addTag() { // properly access and reset reactive form values
const tagCtrl = this.categoryForm.get('category');
if (tagCtrl.value) {
this.tagList.push(tagCtrl.value);
this.tagInput = ''; // in order to have an empty input
}
}
ngOnInit() {
this.storage.get('image_data').then((imageFile) => {
this.imageForm.patchValue({
'image': this.storage.get('image_data')
});
});
this.categoryForm = new FormGroup({
'dual': new FormControl({lower: 100, upper: 150}),
'tag_1': new FormControl(true),
'tag_2': new FormControl(true),
'category' : new FormControl('', Validators.compose([
Validators.maxLength(25),
Validators.minLength(1),
Validators.required
])),
'image': new FormControl(null)
});
}

Why appear in console this error of ionic template?

I have an ionic list that is filled with an ngfor. The list fills without problem, it locks up a bit, however in the console a syntax error appears for one of the ngfor tags.
My Ionic info is:
ionic (Ionic CLI) : 4.12.0
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.3
This is the code of my template:
<ion-content padding>
Tap sobre el producto para añadirlo a favoritos.
<ion-list>
<ion-item-sliding *ngFor="let task of tasks; let i = index">
<ion-item (click)="gofav(task.id)">
<ion-avatar item-start>
<img src="{{ task.foto }}">
</ion-avatar>
<h2 style="padding: 15px 15px;"> {{ task.nombre }}
<ion-icon *ngIf="task.favs == 1" name="star"></ion-icon>
<ion-icon *ngIf="task.favs == 0" name="star-outline"></ion-icon>
</h2>
<p>{{ task.presentacion | presentacion }}</p>
<h1 item-end>{{ task.precio }}</h1>
</ion-item>
<ion-item-options>
<button ion-button color="primary" icon-start (click)="deleteproduct(task.id)">
<ion-icon name="trash"></ion-icon>
Borrar
</button>
<button ion-button color="light" icon-start (click)="gotomodproduct(task.id)">
<ion-icon name="keypad"></ion-icon>
Modificar
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Cargando más productos..."></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
The error that comes up in console is this:
This is the example of the data in a "task" object.
{
brand: 0,
catg: "116",
codigo: "7861006000202",
favs: 1,
foto: "file:///data/data/io.ionic.starter/files/taoEhpeVIJ.jpg",
id: 24,
iddb: 313,
impor: 0,
nombre: "Paños Multiusos Super Absorbentes",
origfrm: 1,
precio: "300,00",
presentacion: "2 Unidades"
}

*ngFor in Angular 4 returns the following error on .shift(): Uncaught TypeError: Cannot read property 'destroyed' of null

When I remove the first element in my array of objects, I receive the error:
Uncaught TypeError: Cannot read property 'destroyed' of null.
Where is this coming from?
My html page:
<ion-list>
<ion-item *ngFor="let s of this.lastScores">
<ion-label>
<ion-grid>
<ion-row >
<ion-col size="3">
{{s.score}}
</ion-col>
<ion-col size="3">
{{s.totalScore}}
</ion-col>
<ion-col size="6">
<small>{{s.newText}}</small>
</ion-col>
</ion-row>
</ion-grid>
</ion-label>
</ion-item>
</ion-list>
I add items to the front as follows:
this.lastScores.unshift({
'score': 1,
'newText': 'hello',
'totalScore': 10,
})
And delete them as follows:
this.lastScores.shift();
this.ref.detectChanges();
I use this.ref.detectChanges() from the constructor private ref: ChangeDetectorRef as the function is called after a .subscribe and need to update the DOM.
just use angular slice pipe
< *ngFor="let s of lastScores | slice : 0 : 1 " }}

How to implement swipeable segments in ionic 3?

I have to implement swipeable segments in ionic 3 application.
I am using https://github.com/siddhartha-gupta/ionic-3-swipe-able-segments/tree/develop/src/pages directives but i am getting following error:
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [tabsList]="categories"
[ERROR ->][(currentTab)]="category"
(tabChanged)="onTabChanged($event)" class="swipe-area">
<ion-list *ngSw"):
ng:///InvitefriendPageModule/InvitefriendPage.html#60:66
Error: Template parse errors:
Can't bind to 'tabsList' since it isn't a known property of 'div'. ("
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [ERROR ->] .
[tabsList]="categories" [(currentTab)]="category"
(tabChanged)="onTabChanged($event)" class="swipe-ar"):
ng:///InvitefriendPageModule/InvitefriendPage.html#60:42
Can't bind to 'currentTab' since it isn't a known property of 'div'.
("
My code is:
In app.module.ts:
import { SwipeSegmentDirective } from '../directives/swipe- segment.directive';
#NgModule({
declarations: [
MyApp,
SwipeSegmentDirective
// ProgressBarComponent
],
In invitefriend.ts:
export class InvitefriendPage {
public category: string = 'everyone';
public categories: Array<string> = ['everyone', 'group', 'contact',
'directory']
// tab1Root: any = "EveryonePage";
// tab2Root: any = "GroupPage";
// tab3Root: any = "ContactPage";
// tab4Root: any = "DirectoryPage";
// public categories: Array<string> = ['everyone', 'group', 'contact',
'directory']
constructor(public navCtrl: NavController, public navParams:
NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad InvitefriendPage');
}
onTabChanged(tabName) {
this.category = tabName;
}
In invitefriend.html:
<ion-header>
<ion-navbar color="danger">
<ion-toolbar class="toolbar-color myToolbar">
<ion-segment [(ngModel)]="category" class="tabsSeg">
<ion-segment-button value="everyone" class="segBtn tabname
active activated">
Everyone
</ion-segment-button>
<ion-segment-button value="group" class="segBtn tabname">
Group
</ion-segment-button>
<ion-segment-button value="contact" class="segBtn tabname">
Contact
</ion-segment-button>
<ion-segment-button value="directory" class="segBtn tabname">
Directory
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-navbar>
</ion-header>
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [tabsList]="categories"
[(currentTab)]="category" (tabChanged)="onTabChanged($event)"
class="swipe-area">
<ion-list *ngSwitchCase="'everyone'">
<ion-item>
Batman Begins
</ion-item>
<ion-item>
Transporter
</ion-item>
<ion-item>
Million Dollar Baby
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'group'">
<ion-item>
Game of Thrones
</ion-item>
<ion-item>
Daredevil
</ion-item>
<ion-item>
Arrow
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'contact'">
<ion-item>
Ice Age
</ion-item>
<ion-item>
Lion King
</ion-item>
<ion-item>
Up
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'directory'">
<ion-item>
Ice Age1
</ion-item>
<ion-item>
Lion King1
</ion-item>
<ion-item>
Up1
</ion-item>
</ion-list>
</div>
</ion-content>
I need any solution to solve above error, please give here solution as soon as possible, it would be really appreciated.

Ionic 2 Can't handle menu in front a google maps element

I have made an Ionic V2 side menu application and integrated to it an GMaps element. But I can't handle the element which be in front of that map. The buttons of the side menu are disabled if they are in front of the map and it the same for the pop up of a ionic select element.
So my question is, where is my mistake ? Why I can't handle any element in front of the google map element ?
I can't handle the zone squared in red :
My map html code :
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Carte</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-row center>
<ion-col width-25 center>
<ion-label>Jours :</ion-label>
</ion-col>
<ion-col width-25 center>
<ion-select [(ngModel)]="gender">
<ion-option value="f" selected="true">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-col>
<ion-col width-25 center>
<ion-label>Horaires :</ion-label>
</ion-col>
<ion-col width-25 center>
<ion-select [(ngModel)]="gender">
<ion-option value="f" selected="true">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-col>
</ion-row>
<div #map id="map" style="height:90%;"></div>
</ion-content>
My map ts code :
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, CameraPosition, GoogleMapsMarkerOptions, GoogleMapsMarker } from 'ionic-native';
#Component({
selector: 'page-gmap',
templateUrl: 'gmap.html'
})
export class GMap {
constructor(public navCtrl: NavController) {}
ngAfterViewInit() {
this.loadMap();
}
loadMap() {
let element: HTMLElement = document.getElementById('map');
let map = new GoogleMap(element);
// listen to MAP_READY event
map.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!'));
// create LatLng object
let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);
// create CameraPosition
let position: CameraPosition = {
target: ionic,
zoom: 18,
tilt: 30
};
// move the map's camera to position
map.moveCamera(position);
// create new marker
let markerOptions: GoogleMapsMarkerOptions = {
position: ionic,
title: 'Ionic'
};
map.addMarker(markerOptions).then((marker: GoogleMapsMarker) => {
marker.showInfoWindow();
});
}
}
try this...
// handle side menu issue...
let leftMenu = this.menuController.get('left');
if (leftMenu) {
leftMenu.ionOpen.subscribe(() => {
if (this.map) {
this.map.setClickable(false);
}
});
leftMenu.ionClose.subscribe(() => {
if (this.map) {
this.map.setClickable(true);
}
});
}
All the elements over the map that you want to be able to click must be inside the div that the map was linked.
So your code should look like:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Carte</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div #map id="map" style="height:90%;">
<ion-row center>
<ion-col width-25 center>
<ion-label>Jours :</ion-label>
</ion-col>
<ion-col width-25 center>
<ion-select [(ngModel)]="gender">
<ion-option value="f" selected="true">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-col>
<ion-col width-25 center>
<ion-label>Horaires :</ion-label>
</ion-col>
<ion-col width-25 center>
<ion-select [(ngModel)]="gender">
<ion-option value="f" selected="true">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-col>
</ion-row>
</div>
</ion-content>

Categories