I have an HTML template, details.html, that includes this:
<ion-card>{...first card on page...}</ion-card>
<ion-card [hidden]="showColorBool">
<ion-card-header>
Select a color
</ion-card-header>
<ion-card-content>
<!-- buttons should go here -->
</ion-card-content>
</ion-card>
<ion-card>{...next card on page...}</ion-card>
I need to add the buttons as indicated above. They will be will be styled according to values contained in the details array I have stored in local storage like this:
<button ion-button color={{data[index][color]></button>
I am able to access the arrays and values I need from storage like this in my details.ts:
arr.then( data => {
console.log(data);
for ( let index in data ){
console.log(data[index][color]);
}
});
1) The number of buttons is always dynamic (0-10).
2) The "color" value is needed to set the color value of the buttons.
3) I can't not put this functionality in it's own component/page. It needs to be on the page with the other cards.
Any idea on how I might accomplish this? I have been through the docs and SO for everything I could find. Couldn't really find much on this dynamic stuff.
ngFor is what you are after.
ngFor directive: https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html
The ngFor directive allows you to loop through an array in the template.
details.html
<button *ngFor="let item of data" ion-button color="{{item[color]}}"></button>
Related
I am new to ionic development, but i am familiar with its concepts of ionic-cards that shows data in cards . The issue i am having is how to design a ionic-card in its template file where all data including it's label (that are static most of the time) is dynamic.
I don't want to create multiple ionic-cards, and since the data is different every time for every card , i just want my single ionic card to display different data dynamically (including it's label.
I hope i have explained my point well. Any help would be appreciated.
If I understand correctly you have an array of data that you want to display on a ion-card.
If so you, what you need to do is as follows:
On your .ts file
public myArray: any = [];
constructor(...){}
ionViewWillEnter() {
this.myArray = //populate your array
}
And on your HTML file:
<ion-content>
<ion-card *ngFor='let element of myArray'>
// Populate the cards
<ion-card-title> {{ element.title }} </ion-card-title>
</ion-card>
</ion-content>
I have array of buttons buttons = [1,2,3,4,5,6] which is diplayed in a row
<ion-row>
<div *ngFor = "let button of buttons" class="buttons">
<button ion-button>{{button}}</button>
</div>
</ion-row>
My requirement is the array buttons look like stepper i need
Yes, you can , please take a look at this stackblitz.
But i advice you to add a dynamic id and name for every button, using index, otherwise you will have a lot of problems
I have this JSON in my home.ts
public json_html = {
"button1":"<p><b>first section<b></p>",
"button2":"<p>second section</p>",
"button3":"<p><b>third section<b></p>",
}
On my home.html I want to see three links - button1 , button2 , button3 . If button 1 is clicked, then need to show its data using code like this:
document.getElementById("c1").innerHTML+= "clicked content";
How can I achieve this ?
I'm going to assume you might have more buttons, so let's build a loop. But first, Angular2's ngFor directive doesn't let you iterate over objects, they must be arrays. So we can grab get a array of keys first in your constructor:
this.buttons = Object.keys(this.json_html);
Then we can utilize the ngFor directive in our home.html
<button ion-button *ngFor="let button of buttons" (click)="selectedButton = button">
{{ button }}
</button>
And then we can add to home.html a div to show the html data:
<div *ngIf="selectedButton" [innerHtml]="json_html[selectedButton]">
</div>
Now this is really simple, because your coding your HTML into the JSON object. I'd suggest looking at a tabs example project on Ionic when the data gets more complex.
To achieve that, you should follow this steps:
Create an array of object keys using this.keysArr = Object.keys(this.json_html), because we can't iterate through objects in view
Iterate through this keys using <div *ngFor="let button of keysArr"></div>
Inside the div from step 2, declare another one: <div [innerHTML]="json_html[button]"></div>
I'm using [innerHTML] instead of the regular document.getElementById("c1").innerHTML+= "clicked content", because it looks like "the Angular way". Here is the working example (in app folder):
https://stackblitz.com/edit/angular-9pyhg3?file=app/button-overview-example.html
UPDATE
"It is showing me data of all 3 together, i want to see button1, button2, button3 and on clicking it to show data of the clicked element. Whereas currently it is directly showing data, can you update stackblitz"
Sure, here it is:
https://stackblitz.com/edit/angular-9pyhg3-e49qys?file=app/button-overview-example.html
Previous Question I raised
Hi, above is a question i asked in stack overflow. As a follow-up of that questions, if I am trying to use the ui-view to identify the lists and details.
How can I track which ion-item I have clicked / currently active in order to show the relevant detail on the right side?
Please give me some suggestions and directions about that! I have already struggling with the same page for a week... Thank you so much!
http://ionicframework.com/docs/api/directive/ionList/
<ion-list>
<ion-item ng-repeat="item in items track by $index" ng-click=clickedItem(item)>
</ion-item>
</ion-list>
Now in controller
$scope.clickedItem = function(item){
//do stuff here
}
You can do this by $index like,
<ion-item ng-repeat="item in items track by $index" ng-click=clickedItem($index)>
But It is not godd solution because, If we sort list or search items list, the index value will be changed. So, pass the item to the function.
I am using Ionic 2.
I have a list of items, where I use <ion-item-options>. They work perfectly as documented here.
When a user slides the item to the left, the options are exposed.
Question
Is it possible to add that when the user long presses on the item, it also exposes the options?
Thanks
<ion-list>
<ion-item-sliding...
<ion-item...
.........
</ion-item>
<ion-buttons>
<button light (click)="alert('todo')"><ion-icon class="ion-ios-heart"></ion-icon>Favourite</button>
</ion-buttons>
</ion-item-sliding>
</ion-list>
The longer press (as said by it's name) can be called on by using (press) instead of (click). This way you can call a function when the ion-item has been pressed and toggle a boolean.
Next in your ion-item-options you can set an *ngIf="yourBoolean" and your options will be toggled