Im populating dynamic data using ionic 2 & angular here im getting and displaying the data but im getting table in non responsive format and below is my code
<ion-grid>
<ion-row style="padding-top:5px;paddind:bottom:5px;background:#488aff">
<ion-col>
A
</ion-col>
<ion-col>
B
</ion-col>
</ion-row>
<ion-row *ngFor="let value of resultData" style="background:#eff0f1">
<ion-col>
{{value.A}}
</ion-col>
<ion-col>
{{value.b}}
</ion-col>
</ion-row>
Related
I have a list of image they come from an json array with 7 elements :
The key of image is
<ion-grid>
<ion-row *ngFor="let image of imageList; let i = index;">
<ion-col>
<div >
<img [src]="image.imageUrl" />
</div> </ion-col>
<ion-col>
<div >
<img [src]="image.imageUrl" />
</div>
</ion-col>
</ion-row>
</ion-grid>
But this code show me the same pic per row , I have tried to set image[i] on the first col and image[i+1] on the second but nothing.
I want to show two image per row like this but without same image.
Thanks.
Something like this should work:
<ion-grid>
<ion-row *ngFor="let image of imageList; let i = index;">
<ion-col>
<div >
<img [src]="imageList[i]?.imageUrl" />
</div> </ion-col>
<ion-col>
<div >
<img [src]="imageList[i + 1]?.imageUrl" />
</div>
</ion-col>
</ion-row>
Inside de *ngFor loop, the image will always be one image for every iteration. You should iterate the imageList and use the index to access the images from imageList. Hope it makes sense
I placed many cols in 1 row.
When the screen size is big, ion-cols are placed in a row in a clean manner, but in mobile view of chrome, when the screen size is small, most of ion-cols are placed in a row and a few remaining are in the second row.
My code looks like this.
<ion-row>
<ion-col size="3" size-sm="2">
<ion-icon name="add-circle"></ion-icon>
<ion-icon name="remove-circle"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="cloud-download"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="save"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="settings"></ion-icon>
</ion-col>
<ion-col>
<ion-icon [name]="icon_show_hide === 'Hide' ? 'eye-off' : 'eye'">
</ion-icon>
</ion-col>
<ion-col>
<ion-icon name="map"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="triangle"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="arrow-undo-circle"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="arrow-redo-circle"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="trash"></ion-icon>
</ion-col>
</ion-row>
how can I make the number of the cols in each row same like 5 cols in the first row and another 5 in the second row?
I need this in all mobile devices.
can anyone give me the solution to this problem?
a row can have maximum 12 unit. you can divided 12 between 5 col. and for this pattern you fill first row and another cols is in second row
<ion-row>
<!-- fill first row-->
<ion-col size="5"></ion-col>
<ion-col size="5"></ion-col>
<ion-col size="2"></ion-col>
</ion-row>
in this case i fill a row with 3 col. and also you can fill row with offset
<ion-row>
<!-- fill first row-->
<ion-col size="5" offset="2"></ion-col>
<ion-col size="5"></ion-col>
</ion-row>
in this case i fill offset 2 unit from the left.
and for customize for screen size you can use permistion after size and offset.
<ion-row>
<!-- fill first row-->
<ion-col size-md="5" offset-md="2"></ion-col>
<ion-col size="5"></ion-col>
</ion-row>
i customize my col when screen size is md or lover . but you can learn about all about this in ionic offcial
Hi there I am trying to put a icon on one of my buttons that has a css class in my ionic project but when I do the icon does not show up heres my code down bellow. I have my css and my html/angular code down bellow, im trying to have 4 buttons nice and big next to each other and have a icon to make it look not so plain but when I do it does not show up
Thanks
Adam Weston
a{
text-decoration:none;
}
.buttontop{
display:inline-block;
padding:20px;
height:120px;
width:170px;
text-align:center;
background:white;
color:white;
font-size: 10px;
}
.active{
background:#188171;
}
<ion-header>
<ion-toolbar>
<ion-title>
Home
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card class="welcome-card">
<ion-img src="/assets/shapes.svg"></ion-img>
<ion-card-header>
<ion-card-title>Welcome to ATAM</ion-card-title>
</ion-card-header>
<ion-card-content>
ATAM is the Original Learning Center for Everything Technology, Art, Music and Recording. We blend creativity with genius, and foster entrepreneurship.
ATAM offers a huge variety of ways to learn through private instruction, group classes, advanced STEM/STEAM camps and through experimental game play.
</ion-card-content>
</ion-card>
<button ion-button icon-start>
<ion-icon name="star"></ion-icon>
Parties
</button>
<ion-button class="buttontop" expand="block">Sign up for Camp!
<ion-icon name="star"></ion-icon>
</ion-button>
<ion-button class="buttontop" expand="block">CreditCard Update</ion-button>
<ion-button class="buttontop" expand="block">Contact Us</ion-button>
<ion-card class="NewAtATAM">
<ion-img src="/assets/newatatam.jpg"></ion-img>
<ion-card-header>
<ion-card-title>New At ATAM</ion-card-title>
</ion-card-header>
</ion-card>
<ion-card class="SignupforMusiclessons">
<ion-img src="/assets/music.jpg"></ion-img>
<ion-card-header>
<ion-card-title>Sign Up For Music Lessons</ion-card-title>
</ion-card-header>
<ion-card-content>
acoustic - electric - music production - recording
ATAM Music Department teaches over 30 instruments, acoustic and digital, as well as music production and professional recording. Sign up now!
Private lessons are Monday through Saturday
12pm to 8pm
</ion-card-content>
<ion-button expand="block" color="dark" href="contact-us" >sign up</ion-button>
</ion-card>
<ion-card class="Signupforsummercamp">
<ion-img src="/assets/summercamp.jpg"></ion-img>
<ion-card-header>
<ion-card-title>Sign Up For Summer Camp</ion-card-title>
</ion-card-header>
<ion-card-content>
summer 2019 - tech- sports - art - music - field trips
Come experience ATAM Tech and Outdoor Summer Camp. The best of all worlds, combining tech, art, music, sports and field trips!
When: Monday-Friday, 8:30am to 3:30pm
June 10 - August 30
After Care Hours: 3:30 to 7:30.
</ion-card-content>
<ion-button expand="block" color="dark" href="camp">sign up</ion-button>
</ion-card>
<ion-card class="lessonsandclasses">
<ion-img src="/assets/lessonsandclasses.jpg"></ion-img>
<ion-card-header>
<ion-card-title>Lessons and Classes</ion-card-title>
<ion-button color="dark" expand="full" fill="solid" href="contact-us">Learn more about Private Lessons</ion-button>
</ion-card-header>
</ion-card>
<ion-card class="tech">
<ion-img src="/assets/TECHSQUARE.jpg"></ion-img>
<ion-card-header>
</ion-card-header>
<ion-card-content>
Robotics, Programming, Game Design, App Building, Website Design, Engineering, Architecture
</ion-card-content>
<ion-button expand="block" color="dark" href="contact-us">Start Learnig</ion-button>
</ion-card>
<ion-card class="music">
<ion-img src="/assets/MUSICSQUARE.jpg"></ion-img>
<ion-card-header>
</ion-card-header>
<ion-card-content>
30 Acoustic instruments, Music Production, Professional Recording Studios </ion-card-content>
<ion-button expand="block" color="dark" href="contact-us">Start Learning</ion-button>
</ion-card>
<ion-card class="art">
<ion-img src="/assets/ARTSQUARE.jpg"></ion-img>
<ion-card-header>
</ion-card-header>
<ion-card-content>
Traditional Art in all mediums, Digital Illustration using Industry Standard Software and Techniques
</ion-card-content>
<ion-button expand="block" color="dark" href="contact-us" >Start Learning</ion-button>
</ion-card>
<ion-list lines="none">
<ion-list-header>
<ion-label>Resources</ion-label>
</ion-list-header>
<ion-item href="parties">
<ion-icon slot="start" color="medium" name="book"></ion-icon>
<ion-label>Book A Party</ion-label>
</ion-item>
<ion-item href="camps">
<ion-icon slot="start" color="medium" name="build"></ion-icon>
<ion-label>Sign up For Summer Camp</ion-label>
</ion-item>
<ion-item href="regform">
<ion-icon slot="start" color="medium" name="grid"></ion-icon>
<ion-label>Registration Form</ion-label>
</ion-item>
<ion-item href="creditcard">
<ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
<ion-label>Credit Card Update Form</ion-label>
</ion-item>
<ion-item href="contact-us">
<ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
<ion-label>Contact US</ion-label>
</ion-item>
</ion-list>
</ion-content>
If you want to align these 4 button in single line you should use ion-row, have your buttons placed in their individual ion-col.
And another thing is, correct syntax is <button ion-button></button> not <ion-button></ion-button>
<ion-row>
<ion-col>
<button ion-button icon-start>
<ion-icon name="star"></ion-icon>
Parties
</button>
</ion-col>
<ion-col>
<button ion-button icon-start class="buttontop" expand="block">
<ion-icon name="star"></ion-icon>
Sign up for Camp!
</button>
</ion-col>
<!-- add rest of the buttons in their separate ion-col -->
</ion-row>
I've an ion-card that get its contents from a web server, all is working fine except linking ion-card click event to external url, below is my code
<ion-content no-padding >
<ion-item no-padding *ngFor="let item of items" >
<ion-card (click)="goToDetails('{{item.link}}')">
<img class="images" src="http://mydomain/{{item.captionImage}}">
<ion-item text-wrap>
<div class="headings">{{item.title}}</div>
</ion-item>
<ion-card-content text-wrap>
<p>{{item.message}}"</p>
</ion-card-content>
<ion-row>
<ion-col col-9>
<ion-row>
<ion-col>
<img class="owner-logo" src="http://mydomain/{{item.sourceLogo}}">
</ion-col>
<ion-col>
<div class="owner-name">{{item.source}}</div>
</ion-col>
<ion-col></ion-col>
<ion-col></ion-col>
<ion-col></ion-col>
</ion-row>
</ion-col>
<ion-col col-3 text-right>
<button ion-button clear small color="danger" icon-start (click)="regularShare(index)">
<ion-icon name='share'></ion-icon>
Share
</button>
</ion-col>
</ion-row>
</ion-card>
</ion-item>
</ion-content>
my .ts file is
public goToDetails(url : string){
let target = "_self";
this.theInAppBrowser.create(url,target,this.options);
}
I got this error message
Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 13.
You need to write ion-card like this
<ion-card (click)="goToDetails(item.link)">
If you are in in-build directive like click, ngIf you don't need to use interpolation
I have to solve this problem: I want to display a list of rows with fixed height. Each row has to be horizontally divided in 2 equal parts. Each part has its background color, derived from the i-th element of the list they are referred. Each object in the list has 2 fields (named leftColor and rightColor) that contain the color to be displayed.
In pseudo-code:
<ion-row *ngFor="let colorSource of sources">
<ion-col col-6 background-color="{colorSource.leftColor}"> </ion-col>
<ion-col col-6 background-color="{colorSource.rightColor}"> </ion-col>
</ion-row>
Something like...
How could i obtain something like this?
TY in advance!
Instead of background-color="{colorSource.leftColor}", try to use [ngStyle]="{'background-color': colorSource.leftColor}".
So your final code will be:
<ion-row *ngFor="let colorSource of sources">
<ion-col col-6 [ngStyle]="{'background-color': colorSource.leftColor}"> </ion-col>
<ion-col col-6 [ngStyle]="{'background-color': colorSource. rightColor}"> </ion-col>
</ion-row>
For information about ngStyle diective please look here official doc.
I hope this will help you.