Is it possible to disable array of buttons in anglar 6 - angular6

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

Related

Need to read relevant JSON data on home.html page with click

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

ion-note inside of ion-list cuts off primary text

I am using ionic 3. I am trying to do a list of events where the event name is on the left side and the event note (the start time) is on the right side of the item in an ion-note. Here is my code:
<ion-list *ngIf="events.length !== 0">
<ion-item-group>
<ion-item-divider>
Upcoming events
</ion-item-divider>
<button ion-item *ngFor="let event of events" (click)="itemTapped($event, event)">
{{event.name}}
<ion-note item-right>{{event.start | date: 'HH:mm'}}</ion-note>
</button>
</ion-item-group>
</ion-list>
If I do just that, the note gets displayed on the right properly, however the primary text (the event's name) gets chopped off with an ellipsis inserted in the end, even though it would fit just fine. Here's a picture:
I have checked the documentation on ionic's website, and I copied over the demo source from here: https://github.com/ionic-team/ionic/blob/master/demos/src/list/pages/page-one/page-one.html
Funny enough, it looks good in their showcase but pasted into my application it looks just as off as my example.
The question is: how do I make ionic not cut off the primary text in my list?
Thanks.
**UPDATE: **I have found the solution. I have added a css rule (min-width:75%) for ion-notes in an scss associated with a different page, but that somehow got applied to this page as well. Removing that CSS rule fixed the issue for me.
In your code you're using item-right class, however in the documentation as well as the demo source page, it is item-end.
Please check the item placement attributes here:
https://ionicframework.com/docs/api/components/item/Item/
If that doesn't help, you can try overriding the padding-right attribute of item-content.

add clickable buttons to ionic 2 card programmatically

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>

ion-textarea inside ion-item not working on IONIC 2

I have an ion-textarea inside of ion-item. It's shows fine, but when I press over the textarea, it's shows and hides the keyboard. And because the keyboard is hidden, I cannot put any text.
It's like that onblur event was triggered inmediatly after that I touched screen.
This is my code:
<ion-item>
<ion-label stacked>Comment</ion-label>
<ion-textarea [(ngModel)]="formData.comment" name="comment" placeholder="Put any comment..."></ion-textarea>
</ion-item>
Any ideas?
You will often run into errors like this whenever using ion-item in that manner. I had the same thing happen with inputs until I just wrapped them in a div instead.
Per the docs - An item can contain text, images, and anything else. Generally it is placed in a list with other items. It can easily be swiped, deleted, reordered, edited, and more. An item is only required to be in a List if manipulating the item via gestures is required. It requires an ItemSliding wrapper element in order to be swiped.
You may want to restructure your code or format that ion-item in a list of some sort.

<ion-item-options> activated by long press

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