I need to create a href inside my ion-fab and link to a certain position of google maps, I wonder if this is possible in ionic 3?
This is my home-condominios.ts
<img [src]="property?.imagem">
<ion-fab right top>
<button ion-fab>
<ion-icon name="pin"></ion-icon>
</button>
</ion-fab>
And this is my condominios.ts
initializeItems(){
this.items = [
{id: '1', nome:'ACQUALINA', rua:'Paraguassu', cidade:'Xangri-lá', bairro:'Xangri-lá', numero:'130', localizcao: 'https://www.google.com.br/maps/place/Condom%C3%ADnio+Acqualina/#-29.8284344,-50.0542912,15z/data=!4m2!3m1!1s0x0:0xe64c7f1670c62f72?sa=X&ved=2ahUKEwiAy8rM1Y7eAhXDHpAKHYeaD20Q_BIwFHoECAsQCw' , imagem:'assets/logos/ACQUALINA.jpg'},
];
}
Note that I'm defining the location within my array of objects
I was able to solve the following
<img [src]="property?.imagem">
<ion-fab right top>
<a href="{{property.localizacao}}" target="_system"><button ion-fab>
<ion-icon name="pin"></ion-icon>
</button></a>
</ion-fab>
Related
i added an icon in a text input, the icon is supposed to be clickable but after adding inside the text input it's no more clickable
<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon" </ion-icon>
</ion-input>
You need to place the <icon> element inside the <button> element.
<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
<!-- In Ionic 4 version it is used as follows. -->
<ion-button (click)="clickEventFunction($event, item.id)">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
</ion-button>
<!-- Used as below before "Ionic 4" release. -->
<button (click)="clickEventFunction($event, item.id)">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
</button>
</ion-input>
clickEventFunction(event: Event, id: any){
/* Something */
}
References
ion-button
Ionic API Documentation
inside you ts file take a boolean:
showPass: boolean = false;
in html:
<ion-item lines="none">
<ion-input type="{{showPass ? 'text' : 'password'}}" placeholder="Password" (ionChange)="inputChanged($event)" [formControlName]="formCtrlName"></ion-input>
<ion-icon name="eye-outline" slot="end" *ngIf="!showPass" (click)="showPass = !showPass"></ion-icon>
<ion-icon name="eye-off-outline" slot="end" *ngIf="showPass" (click)="showPass = !showPass"></ion-icon>
</ion-item>
A simple way of making a clickable icon in an ion input.
So im using ionic with the firebase data and i have to load a lot of it.
And because of this massive data to load, not all images appear (As you can see on the screen shot).
So... what should i do and is it possible to lazy load the cards with the data.
there is my code
<div *ngIf="postcall1">
<ion-card (swipeleft)="goTochat(postscall1)" *ngFor="let postscall1 of postcall1">
<img class="pP" src="https://ucarecdn.com/{{ postscall1.profilePic }}/-/scale_crop/200x200/center/" />
<ion-img (press)="openOptionSheet(postcall1)" (click)="open(postscall1)"
src="https://ucarecdn.com/{{postscall1.postboost1ID}}/-/preview/{{postscall1.effect}}"></ion-img>
<ion-button mode="ios" class="this-button" color="light" fill="clear">
<ion-icon slot="icon-only" [name]="heartType"></ion-icon>
</ion-button>
</ion-card>
</div>
and i have these 3 firebase function to load
ngOnInit() {
const postcall = this.aff.httpsCallable('postscall')
this.sub = postcall({}).subscribe(data => {
this.postcall = data
console.log("postcall");
console.log(this.postcall);
})
///
const postcall1 = this.aff.httpsCallable('postscall1')
this.sub = postcall1({}).subscribe(data => {
this.postcall1 = data
console.log("postcall1");
console.log(this.postcall1);
})
}
thank you in advance
As you are using Ionic, put your items in an Ion virtual scroll.
In the documentation, it is clearly explained that only the necessary elements will be loaded.
For performance reasons, not every record in the list is rendered at once; instead a small subset of records (enough to fill the viewport) are rendered and reused as the user scrolls.
Not tested code below, but this example might help you.
<ion-virtual-scroll [items]="postcall1">
<ion-card *virtualItem="let postscall1">
<img class="pP" src="https://ucarecdn.com/{{ postscall1.profilePic }}/-/scale_crop/200x200/center/" />
<ion-img (press)="openOptionSheet(postcall1)" (click)="open(postscall1)"
src="https://ucarecdn.com/{{postscall1.postboost1ID}}/-/preview/{{postscall1.effect}}"></ion-img>
<ion-button mode="ios" class="this-button" color="light" fill="clear">
<ion-icon slot="icon-only" [name]="heartType"></ion-icon>
</ion-button>
</ion-card>
</ion-virtual-scroll>
I'm new to ionic. Actually, I'm trying to display products added to cart in cart page. I got value from Foreach method, but when I try to display, it won't show.
cartpage(){
this.cart.cartview().then((result) => {
this.cartdisplay = JSON.parse(JSON.stringify(result));
this.categorydata = JSON.parse(JSON.stringify(this.cartdisplay.data));
console.log('result11:'+JSON.stringify(this.categorydata));
var arr = Object.keys(this.categorydata.items);
//this.cartarray =[];
arr.forEach( a =>{
this.cartarray['orderitem_name']= this.categorydata.items[a].orderitem_name;
this.cartarray['orderitem_quantity']= this.categorydata.items[a].orderitem_quantity;
console.log('cart : '+this.cartarray['orderitem_quantity']);
console.log(a) //item id
console.log(this.categorydata.items[a].cart_id) //product id
})
console.log(this.cartarray);
})
}
in the console log, orderitem_name and orderitem_quantity is displaying, but it does not show in the HTML page.
This is my HTML code:
<ion-card>
<ion-card-header>Items</ion-card-header>
<!--<ion-card-content >Your cart is empty!</ion-card-content>-->
<ion-list no-lines>
<ion-item *ngFor="let tms of cartarray;" >
<ion-avatar item-left>
<img src="">
</ion-avatar>
<h2><b>{{tms.orderitem_name}} x {{tms.orderitem_quantity}}</b></h2>
<div [ngSwitch]="product?.price_discount">
<p *ngSwitchCase="true">₹ <span st></span> <span></span></p>
<p *ngSwitchDefault>₹ <span style="text-decoration: line-through;"></span> <span></span></p>
</div>
<div>
<button primary large>
<ion-icon name="add" (click)="increaseQuantity(i)"></ion-icon>
</button>
<button primary large>
<ion-icon name="remove" (click)="decreaseQuantity(i)"></ion-icon>
</button>
</div>
</ion-item>
</ion-list>
<!--<ion-card-content ><div>Total for this order is ₹ </div></ion-card-content>-->
</ion-card>
Help me to display a value in foreach loop in ionic 3
You can try these
this.cart.cartview().then((result) => {
this.cartarray = Object.keys(result["data"]["items"]).map((key) => {
return result["data"]["items"][key];
});
})
And your html file
<div *ngFor="let tms of cartarray;">
<h2><b>{{tms.orderitem_name}} x {{tms.orderitem_quantity}}</b></h2>
</div>
i don't no ionic so thats why i'am testing with div but it's work fine.
you miss the "tms" variable name before display list of data
<ion-item *ngFor="let tms of cartarray;" >
<h2><b>{{tms.orderitem_name}} x {{tms.orderitem_quantity}}</b></h2>
</ion-item>
You should debug your array like
<ion-item *ngFor="let tms of cartarray;" >
<h2><b>{{tms | json }} x {{tms | json}}</b></h2>
</ion-item>
Thanks
My data suddenly stopped binding to UI while it is displayed on console correctly
here is my code
this is my html file
<ion-content>
<ion-card *ngFor="let product of selectedproducts; let i = index">
<ion-item class="bigclass" *ngIf="length>0"><p>{{product.image}}</p>
<ion-thumbnail item-start>
<img-loader [src]="product.image" useImg></img-loader>
</ion-thumbnail>
<h4 top text-wrap>{{product.name}}</h4>
<p>Rs.{{product.price*product.quantity}}</p>
<button class="dec" (click)="decrement(product)"
[disabled]="product.disabled"><ion-icon icon-only
name="remove-circle">
</ion-icon></button>
Quantity:{{product.qtyy}}
<button class="inc" (click)="increment(product)"
[disabled]="product.disabled" ><ion-icon icon-only
name="add-circle" ></ion-icon></button>
</ion-item>
The loop is working fine and it is showing other static elements correctly but not the ones that are binded.
This is my .ts file
constructor(private storage: Storage,public navCtrl: NavController) {
this.storage.get('listforcartproducts').then((val) => {
this.selectedproducts =val;
console.log(this.selectedproducts);
});
I need to apply the sliding effect with these buttons. I have the following html:
<ion-row class="row-two-button">
<ion-col class="button-group">
<button ion-button round color="secondary" [ngClass]="{dark: travelDestinationA, light: travelDestinationB}" (click)="changeDirectionTravel()">
<ion-icon name="md-bus"></ion-icon>
Centro
</button>
<button ion-button round color="secondary" [ngClass]="{dark: travelDestinationB, light: travelDestinationA}" (click)="changeDirectionTravel()">
<ion-icon name="md-bus"></ion-icon>
Bairro
</button>
</ion-col>
</ion-row>
I need to make the slide effect in scss. I'm using ionic 3. If it does not work with my html code how can I do it with another type, a div or something like
When sliding it is also necessary to perform a function in angular 2 or angular 4