In my app I have variable of String. Which is have in string name of attribute to add.
ngOnInit()
{
this.colAttibute = 'width-50';
}
or it can be equal to 'width-100'. My app is get device width and set the value of this variable on onNgInit method.
I want to set this attribute to my html code something like that:
<ion-list no-lines *ngIf="list">
<ion-list-header>
Лидеры продаж
</ion-list-header>
<ion-item class="categoryProductItem" *ngFor="let row of list;">
<ion-row wrap >
<ion-col *ngFor="let product of row" $colAttibute > <!--Here must be width-50 or width-100 attribute-->
<a ion-item detail-push (click)="onSelectItem(product)" >
<div class="categoryProductItemImage" *ngIf="product.getMainImage()">
<ion-img [src]="product.getMainImage()['small_url']"></ion-img>
</div>
<h2>
{{product.title}}
</h2>
</a>
</ion-col>
</ion-row>
</ion-item>
</ion-list>
How to do this?
You can set the width like this:
<ion-col [attr.width-70]="flag">
Where flag is a boolean value indicating whether to apply this attribute or not.
Unfortunately, you will need to list all the available attributes in order to support all of them dynamically.
Related
EDIT: adding a stackblitz:
https://stackblitz.com/edit/ionic-b2r7si
I am using ion-slides as following:
<ion-slides class="fullWidth" [options]="slideOptsOne" #slideWithNav
(ionSlideDidChange)="change($event)">
<ion-slide #status *ngFor="let array of arrays">
<ion-col>
{{array}}
</ion-col>
</ion-slide>
</ion-slides>
I need to change the css style of the current active slide, like make it underlined or bold. I've done some researches and apparently I should use [ngClass]='' but can't know how.
I am getting the index of the active slides using:
change(e) {
this.slides.getActiveIndex().then(
(index) => {
this.currentIndex = index;
console.log(this.currentIndex);
}
)
}
I tried:
<ion-slide #status *ngFor="let array of arrays;let i=index;">
<ion-col [ngClass]="{'activeIndex': currentIndex==array[i]}">
{{array}}
</ion-col>
</ion-slide>
And activeIndex style:
.activeIndex{
font-size: 1.5em;
}
But only one element of the array is changed of style.
Set the activeIndex class to currentIndex === i. If you set it to array[i], you will get letters of the array instead of the index number you are looking for.
<ion-col [ngClass]="{'activeIndex': currentIndex === i}">
{{ array }}
</ion-col>
Working stackblitz
I'm simulating something like a shopping cart using ionic 2. Basically you write the item's name and value and it's creating a list with checkbox as in the image below.
But I wanted the option only appear when selecting one of the checkboxes, and did not stay static on the screen as it is now. How can I do this?
grid calling the CheckBox:
<ion-grid>
<ion-row *ngFor="let item of produto">
<ion-item>
<ion-label (click)="clicou(item.desc)">
{{ item.desc }} {{ item.valor }}
</ion-label>
<ion-checkbox checked="false"></ion-checkbox>
</ion-item>
</ion-row>
</ion-grid>
button code part:
<button ion-button block (click)="remove()" color="danger" style="transition: none 0s ease 0s;">
<span class="button-inner">
<ion-icon name="close"></ion-icon>
Remover Selecionados
</span>
<div class="button-effect"></div>
</button>
in ts create a variable that contains the value of the checks, as an example I will use productState which will be boolean type, and create in produto a state.
you can use a ngmodel and the variable already created (productState) to validate the status of the product, and use the event (ionchange) to this
<ion-grid>
<ion-row *ngFor="let item of produto">
<ion-item>
<ion-label (click)="clicou(item.desc)">
{{ item.desc }} {{ item.valor }}
</ion-label>
<ion-checkbox (ionChange)="validState()" [(ngModel)]="productState" ></ion-checkbox>
</ion-item>
</ion-row>
in ts create a function to valid the state of products:
validState(){
let cont = 0;
for (let index = 0; index < this.produto.length; index++) {
if (this.produto[index].State){
cont++;
}
}
if(cont >=1){
this.productState = true;
}else{
this.productState = false;
}
}
and in the button we will use ngIf to validate the product status through productState
<button *ngIf="productState" ion-button block (click)="remove()" color="danger" style="transition: none 0s ease 0s;">
<span class="button-inner">
<ion-icon name="close"></ion-icon>
Remover Selecionados
</span>
<div class="button-effect"></div>
</button>
ngIf docs
ngmodel docs
Im Using Ionic3.I want to change my ion-card background color whenever the click function fires, i have some problem it does not work for me, any help on this would be great.Thank You
Thanks
html
<ion-card [color]="buttonColor" (click)="someAction()" tappable>
<ion-card-content >
<p class="item-nme">01.Account Creation Success</p>
<div item-end class="item-mark"><img src="../assets/imgs/checked.png"></div>
</ion-card-content>
</ion-card>
.ts
export class WelcomePage {
private buttonColor: string = "primary";
someAction() {
this.buttonColor = "light";
}
}
you need to use ngStyle or style.background. ion-card doesn't have direct color attribute.
<ion-card [ngStyle]="{'background':buttonColor}" (click)="someAction()" tappable>
<ion-card-content >
<p class="item-nme">01.Account Creation Success</p>
<div item-end class="item-mark"><img src="../assets/imgs/checked.png"></div>
</ion-card-content>
</ion-card>
Using style:
<ion-card [style.background]="buttonColor" (click)="someAction()" tappable>
<ion-card-content >
<p class="item-nme">01.Account Creation Success</p>
<div item-end class="item-mark"><img src="../assets/imgs/checked.png"></div>
</ion-card-content>
</ion-card>
I'm not sure to understand the error I'm getting while looping through an array of options to populate my select list.
Here is the error I get
Error in ./PhonePage class PhonePage - caused by:
If ngModel is used within a form tag, either the name attribute must be set or the
form control must be defined as 'standalone' in ngModelOptions.
Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
Here is my html code
<form>
<h2>Quel est votre numéro de téléphone?</h2>
<ion-list>
<ion-grid>
<ion-row>
<ion-col width-33>
<ion-item>
<ion-select [(ngModel)]="optionList">
<ion-option *ngFor="let item of optionList" value="{{item.text}}">{{item.text}}</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
</form>
Prerak Tiwari's answer is correct.
Here is just a little tip: I see you bind your ion-select to "optionList" but this is just the list of options you want to show and need to create all ion-options.
You should bind the ion-select to a new parameter, because aftewards it will hold the selected ion-option.
If ngForm is used, all the input fields which has [(ngModel)]="" must have a attribute name with a value.
I'm not a programmer, as my guy left, and I'm left debugging the code:
Currently in an ion-item I have an ion-avatar which has displays a circular image. As best as I can tell, it is using the class="round_image" the following code:
<ion-thumbnail class="round-image" item-right>
But where does round-image come from, and how can i get a regular rectangular image?
Please advise.
Here is the entire code:
<ion-title padding>Events</ion-title>
<!--<ion-toolbar>
</ion-toolbar> -->
</ion-header>
<ion-content>
<ion-segment [(ngModel)]="genderSegment" color="danger" padding>
<ion-segment-button value="men" (click)="updateGenderSegment(1)">
Men
</ion-segment-button>
<ion-segment-button value="women" (click)="updateGenderSegment(2)">
Women
</ion-segment-button>
<ion-segment-button value="both" (click)="updateGenderSegment(3)">
Both
</ion-segment-button>
</ion-segment>
<ion-list text-wrap>
<ion-item-group *ngFor="let group of groups">
<ion-item-divider dark><h2>{{ group.label }}</h2></ion-item-divider>
<button ion-item detail-none *ngFor="let event of group.events" [navPush]="eventDetailsPage" [navParams]="{eventId: event.$key}">
<ion-thumbnail class="my-image" item-right>
<div image-cache class="photo" [ngStyle]="{ 'background-image': 'url(' + (event.user | async)?.photoURL + ')'}"></div>
</ion-thumbnail>
<h2><strong>{{ event.title }}</strong></h2>
<p>By: <strong><i>{{ (event.user | async)?.name }}</i></strong></p>
<p>{{ event.category }}</p>
</button>
</ion-item-group>
</ion-list>
<!--<ion-fab hideWhen="ios" right bottom>
<button ion-fab color="danger" (click)="addEvent()">
<ion-icon name="create" ></ion-icon>
</button>
</ion-fab>
-->
<ion-infinite-scroll (ionInfinite)="loadMore($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
I'd recommend you to learn the basics of HTML and CSS. Check out this link http://www.w3schools.com/
Now, back to your question.
2 options.
1.
Remove the class="round-image" since I believe ion-thumbnail will be squared by default, if this isn't the case, move on to 2.
2.
Your page is called 'Events' so depending on how clean your programmer was, there should be a events.scss, events.component.scss or events.css file
scss and css are used for styling your page. So if you have a round image it will be defined here.
In that file (if it exists, else it's hidden in some other scss or css file) there should be a .round-image (ctrl+f -> .round-image). There will be a property called border-radius. This is the amount your borders will 'curve'. So setting it to 0 will create a square/rectangle image.
If they are rectangle and you want it to be a square you could use this SO question How to "crop" a rectangular image into a square with CSS? The answer provided will prevent your image from 'squishing'*.
*Squishing example: if it's a profile image which is higher than wide, the person in the profile image will look fat when you force it into a square.
It looks like you should remove class="round-image"
<ion-thumbnail class="round-image" item-right>
should be
<ion-thumbnail item-right>