i'm trying to create ion-grid with me just to columns dynamically,
just like this but dynamically
<ion-grid fixed >
<ion-row>
<ion-col > 1</ion-col>
<ion-col > 2</ion-col>
</ion-row>
<ion-row>
<ion-col > 3</ion-col>
<ion-col > 4</ion-col>
</ion-row>
</ion-grid>
Here is working Example
<ion-grid fixed >
<ion-row *ngFor="let cus of customer; let i = index">
<ion-col>{{ cus.name }}</ion-col>
<ion-col > <img [src]="cus.image" class="imgCardMain" /></ion-col>
</ion-row>
</ion-grid>
.ts file
imgaddress="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAHQAxwMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAEBQMGAAECBwj/xAA6EAACAQMDAgQDBwMDBAMB";
customer = [{
"name" : "Alfreds Futterkiste",
"city" : "Berlin",
"image" : this.imgaddress,
"price":10
},{
"name" : "Alfreds Futterkiste",
"city" : "Berlin",
"image" :this.imgaddress,
"price":10
},{
"name" : "Alfreds Futterkiste",
"city" : "Berlin",
"image" : this.imgaddress,
"price":10
},{
"name" : "Alfreds Futterkiste",
"city" : "Berlin",
"image" : this.imgaddress,
"price":10
}]
<ion-grid fixed >
<ion-row *ngFor="let cus of customer">
<ion-col size="6">{{ cus.name }}</ion-col>
<ion-col size="6"> <img [src]="cus.image" class="imgCardMain" /></ion-col>
</ion-row>
</ion-grid>
You just need to add size. colum size depends on you but remembers one row has 12 col so as you need u can manage it by your self.
Related
thanks in advance, I am using Ionic 4 for a mobile app and on a page there is a need to list out the nested data but I don't seem to be able to get it right.
Following is the JSON Data
"campaign_performance": {
"id": 11783,
"name": "calvinseng.com",
"mobile": "false",
"date_from": "2018-01-01",
"date_to": "2018-01-02",
"keywords": [
{
"id": 235505,
"name": "hot stamping printing",
"positions": {
"2018-01-01": 1,
"2018-01-02": 1
}
},
{
"id": 235506,
"name": "creative agency singapore",
"positions": {
"2018-01-01": 59,
"2018-01-02": 57
}
}
]
}
and on the page, the html that I did was
<ion-list color="primary" *ngFor="let campaign of userService.campaign_performance">
{{ campaign.name }}
<ng-container *ngFor="let keyword of userService.campaign_performance.keywords">
{{ keyword.id }}
</ng-container>
</ion-list>
But the html returned nothing in the View.
Was hoping to achieve something similar as attached. Any idea?
This looks like its more likely to be:
<ion-list color="primary" *ngFor="let campaign of userService.campaign_performance">
{{ campaign.name }}
<ng-container *ngFor="let keyword of campaign.keywords">
{{ keyword.id }}
</ng-container>
</ion-list>
You are looping each campaign_performance and assigning it to campaign.
So if you want to do an inner loop then you start from that variable and loop its individual contents.
I am using amp-list with firebase REST api. The thing is when I use
"https://kitchentocustomer.firebaseio.com/restaurants/Yiecu6fL2Pas0XFhCsT06Q0dSOp1/menu.json"
I get the amp-list populated,but when I add query parameters
"https://kitchentocustomer.firebaseio.com/restaurants/Yiecu6fL2Pas0XFhCsT06Q0dSOp1/menu.json?orderBy=%22first_cat%22&equalTo=%22BREAKFAST%22&print=pretty"
I get empty amp-list.
Here is the code
<amp-list width="300"
height="250"
single-item
items="."
layout="responsive"
src="https://kitchentocustomer.firebaseio.com/restaurants/Yiecu6fL2Pas0XFhCsT06Q0dSOp1/menu.json?orderBy=%22first_cat%22&equalTo=%22BREAKFAST%22&print=pretty">
<template type="amp-mustache">
<div>
<dt class="col col-10 h3 mb1">{{title}}</dt>
<dd class="col col-2 m0 mb1 self-center right-align">₹{{price}}</dd>
</div>
</template>
</amp-list>
The amp-list response must be a JSON object containing an array property.
Your filtered query (second link) returns a JSON object which does not contain an array.
Your response for this should be something like below
[
{
"discounted": 157,
"first_cat": "BREAKFAST",
"id": "eEaVn8",
"onSale": false,
"price": 167,
"third_cat": "Egg",
"title": "Egg omlete"
},
{
"discounted": 210,
"first_cat": "BREAKFAST",
"id": "pia9nL",
"onSale": false,
"price": 228,
"third_cat": "Waffles",
"title": "Banana & Nutella waffles"
}
]
I am working in Ionic App and I want to show the submenu in the sidebar. I am fetching the menus using the *ngFor but the problem is that I am not able to show the submenu.
This is my app.html:
<ion-menu [content]="content" side="left" type="overlay">
<ion-content class="mymenu22">
<ion-grid class="formenu11">
<h1 class="mymenuh11">OTHERS</h1>
</ion-grid>
<ion-list>
<button menuClose ion-item *ngFor="let p1 of pages1" (click)="openPage(p1)" class="menu2">
<ion-icon name="{{p1.name1}}"></ion-icon> {{p1.title1}}
</button>
</ion-list>
</ion-content>
</ion-menu>
In this, I am showing the menus in the sidebar and I want to show the submenu for the first menu.
This is my app.component.ts:
pages1: Array<{title1: string, component: any, name1: string}>;
this.pages1 = [
{ title1: 'Manage Account', component: ManageaccountPage, name1: 'settings' },
{ title1: 'About Us', component: AboutPage, name1: 'people' },
{ title1: 'Gallery', component: GalleryPage, name1: 'images' },
{ title1: 'Contact Us', component: ContactPage, name1: 'contacts' },
];
For the Manage Account, I want to show the submenu.
For the Manage Account, I want to show the submenu but I am not getting any code for this.
Any help is much appreciated.
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
public appPages = [
{ title: 'Home', url: 'home', icon: 'home' },
{ title: 'About', url: '/about', icon: 'people' },
{ title: 'Contact', url: '/contact', icon: 'call' },
{ title: 'Gallery', url: '/gallery', icon: 'images' },
{ title: 'Setting', url: '/setting', icon: 'settings',
children: [
{ title: 'sub-menu1', url: '/sub-menu1', icon: 'person' },
{ title: 'sub-menu2', url: '/sub-menu2', icon: 'person' },
{ title: 'sub-menu3', url: '/sub-menu3', icon: 'pulse' }
] }
];
constructor() {}
}
==app.component.html==
<ion-app>
<ion-split-pane >
<ion-menu menuId="custom">
<ion-header>
<ion-toolbar >
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div *ngFor="let p of appPages">
<ion-menu-toggle *ngIf="p.url">
<ion-item (click)="sidemenuClick(p)" [routerDirection]="'root'" [routerLink]="[p.url]" [routerLinkActive]="['active-menu']">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label class="menu-name">
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open"
[class.active-parent]="p.open" detail="false">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label class="menu-name">
{{p.title}}
</ion-label>
<ion-icon slot="end" name="arrow-dropdown" *ngIf="p.open"></ion-icon>
<ion-icon slot="end" name="arrow-dropright" *ngIf="!p.open"></ion-icon>
</ion-item>
<ion-list *ngIf="p.open">
<ion-menu-toggle>
<ion-item style="padding-left: 20px;" *ngFor = "let sub of p.children" (click)="sidemenuClick(p)" [routerDirection]="'root'" [routerLink]="[sub.url]" [routerLinkActive]="['active-menu']">
<ion-icon slot="start" [name]="sub.icon"></ion-icon>
<ion-label class="menu-name">
{{sub.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</div>
</ion-content>
<ion-footer class="bar-stable" (click)="logout()">
<ion-menu-toggle>
<ion-item class="sign-out">
<ion-icon class="app-color logo" slot="end" name="log-out"></ion-icon>
<ion-label class="app-color name">Sign Out</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-footer>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
I am new to angular 4. I am working in pagination using angular 4.I ahve installed "npm install ngx-pagination --save". I followed the instruction which was in internet. But I am getting error like "The pipe 'paginate' could not be found ("
]game of games | paginate: { itemsPerPage: 2, currentPage: p }">
{{i}}
"): ng:///ActivityChartModule/ActivityComponent.html#235:32
'pagination-controls' is not a known element:". I tried More. Can any one help me to comeout from this problem. Below are my code,
app.module.ts
import {NgxPaginationModule} from 'ngx-pagination';
imports: [NgxPaginationModule]
in component.ts
p: number = 1;
games = [
{
"id": "1",
"name": "DOTA 2",
"genre": "Strategy"
},
{
"id": "2",
"name": "AOE 3",
"genre": "Strategy"
},
{
"id": "3",
"name": "GTA 5",
"genre": "RPG"
},
{
"id": "4",
"name": "Far Cry 3",
"genre": "Action"
},
{
"id": "5",
"name": "GTA San Andreas",
"genre": "RPG"
},
{
"id": "6",
"name": "Hitman",
"genre": "Action"
},
{
"id": "7",
"name": "NFS MW",
"genre": "Sport"
}, {
"id": "8",
"name": "Fifa 16",
"genre": "Sport"
}, {
"id": "9",
"name": "NFS Sen 2",
"genre": "Sport"
}, {
"id": "10",
"name": "Witcher Assasins on King",
"genre": "Adventure"
}
];
in component.html
<div class="container">
<div class="row">
<nav class="navbar">
<input class="form-control" type="text" name="search">
</nav>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of games | paginate: { itemsPerPage: 2, currentPage: p }">
<td>{{i}}</td>
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="p($event)"></pagination-controls>
</div>
</div>
</div>
If you have already import NgxPaginationModule into app.module.ts, I think it is because you need to restart your project after npm install.
Try ctrl+c and ng serve to restart it again.
I resolved this problem, you need to include in your module.ts following code:
import {NgxPaginationModule} from 'ngx-pagination';
#NgModule({
imports: [ NgxPaginationModule ]
})
You should add CUSTOM_ELEMENTS_SCHEMA in angular-core
and
schemas: [ CUSTOM_ELEMENTS_SCHEMA ] ----add it in your #NgModule({})
refer this link: https://hassantariqblog.wordpress.com/2016/10/12/angular2-template-parse-errors-add-custom_elements_schema-to-the-ngmodule-schemas/
I copied your code and did not face the error you faced. However, the variable p used is actually an event and not a number[].
Replace the table and pagination-control element as per below in app.component.html:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of games | paginate: { itemsPerPage: 2, currentPage: p }">
<td>{{game.id}}</td>
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
Also, declaring p within app.component.ts isn't required as its the paginationApi that gets used internally.
Side note: The error you are getting suggests that the ngx-pagination is not installed successfully. Please check if you have the ngx-pagination folder copied within your project's node_modules folder successfully.
Demo: https://angular-ijtgcv.stackblitz.io
Try changing the order of "import {NgxPaginationModule} from 'ngx-pagination';"
in app.module.ts
It works out for me
after importing NgxPaginationModule to app.module.ts and stop the local server 'npm update' worked for me !
My question refers specifically to http://api.jquery.com/event.target/#example-1
If you use a span in the <li> or other tag to change the style such as <b> as I have done here, that part of the element won't trigger the JQuery function to toggle it's children. How might one go about making this work?
HTML:
<ul>
<li><b>This doesn't work,</b> this does
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
JavaScript:
function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children("ul").toggle();
}
}
$("ul").click(handler).find("ul").hide();
To keep using your current form, I'd suggest using closest():
function handler(event) {
$(event.target).closest('li').children("ul").toggle();
}
$("ul").click(handler).find("ul").hide();
JS Fiddle demo.
Though for my own use I'd prefer:
$('li').on('click', function(e){
e.stopPropagation();
$(this).find('ul').toggle();
});
JS Fiddle demo.
References:
closest().
on().
A complete example of e.target children and closest with datatable and external data.
HtML
<!DOCTYPE html>
<html lang="en">
<head>
<title>example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="col-md-12 sectionone">
<div id="coxtable">
<div class="col-md-3 outerblock" id="section1"><div class="blocks section1"><h6 class="span1">Section1</h6><span class="span1a">Section1a</span></div></div>
<div class="col-md-3 outerblock" id="section2"><div class="blocks section2"><h6 class="span1">Section2</h6><span class="span1a">Section2a</span></div></div>
<div class="col-md-3 outerblock" id="section3"><div class="blocks section3"><h6 class="span1">Section3</h6><span class="span1a">Section3a</span></div></div>
<div class="col-md-3 outerblock" id="section4"><div class="blocks section4"><h6 class="span1">Section4</h6><span class="span1a">Section4a</span></div></div>
</div>
</div>
<div class="sectiontwo col-md-12">
<table id="example">
<thead>
<tr>
<th>name</th>
<th>stargazerscount</th>
<th>forkscount</th>
<th>description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="testmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="modalbtn btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript
$(document).ready( function () {
var tables=$('#example').DataTable( {
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json",
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
/*onclick filter*/
$(".outerblock").click(function(e){
$("#testmodal").modal('show');
var item=$(e.target).closest('span').text();
$( ".modalbtn" ).one( "click", function(event) {
$(this).off(event);
alert(item)
var tables=$('#example').DataTable( {
"destroy":true,
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json?id="+item,
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
});
});
$("#example").delegate("tbody tr td:first-child", "click", function(e){
var item=$(e.target).text();
//alert(item);
$("#testmodal").modal('show');
$( ".modalbtn" ).one( "click", function(event) {
$(this).off(event);
alert(item);
var tables=$('#example').DataTable( {
"destroy":true,
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json?id="+item,
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
});
});
});
json
[{
"name": "mango",
"stargazerscount": 526,
"forkscount": "critical",
"description": "fruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
}
]