I have this in my html page:
<ion-content padding>
<ion-list></ion-list>
</ion-content>
I want to add items to this list from my .ts file. How do I do such a thing?
Rendering HTML on .ts is not a good option, you should add an Array/Observable on .ts and
render it using ngFor
<ion-list>
<ion-item *ngFor="let term of yourArray;">
<p>{{term}}</p>
</ion-item>
</ion-list>
.ts Code will be,
yourArray = ['first','second'];
What do you mean by "adding ion-items to my .ts file"? You are supposed to add ion-items to your ion-list in the .html file.
Try the following:
<ion-content padding>
<ion-list>
<ion-item>
My first item in this list
</ion-item>
<ion-item>
My second item in this list
</ion-item>
</ion-list>
</ion-content>
Please refer to the documentation in order to view a full example of ion-items inside ion-lists.
Related
The following code displays data in this way current display
<div id="scrollDiv">
<ion-content style="height: 280px" [scrollEvents]="true">
<ion-grid>
<ion-row *ngFor="let item of zdruzenData; let i = index" >
<ion-col size="auto" class="cell-class" (click)="prikaziEvente(i+1)">{{item}}</ion-col>
<div *ngIf="izbranDanInt == i+1">
<ion-row *ngFor="let item of izbranDatumEventi">
<ion-col size="auto" class="cell-class" >{{item}}</ion-col>
</ion-row>
</div>
</ion-row>
</ion-grid>
</ion-content>
But i want it to be like this(edited with paint) wanted display.
As if the chosen day has this sublist display of timestamps(it gets displayed onclick, the logic for this is written and working). Sort of like comments on forums like reddit when you comment on the comment and it gets indented right.
So my question here comes from my lack of html, angular and ionic frontend knowledge and there is no need to stick to the ionic components like ion grid, as long as it gets display in a list-sublist way dynamically.
Your problem comes from the use of row and col inside row and col.
If you put two col in a row, on large screen it will take half the space (6 blocks each). Or you need to use
<ion-col size="12"></ion-col>
You could also use item or card to display your data.
https://stackblitz.com/edit/ionic-marezw?file=pages/home/home.html
<ion-grid>
<ion-row *ngFor="let list of dataList">
<ion-col>
<ion-item (click)="onClick()">
{{list}} (click me)
</ion-item>
<ion-item *ngIf="clicked === true">
<ion-item *ngFor="let sublist of dataSublist">{{sublist}}</ion-item>
</ion-item>
</ion-col>
</ion-row>
I don't know if you want everything to open on click, or just data under the one that is clicked.
It'll help if you show us izbranDatumEventi and zdruzenData. Or at least an equivalent construction of your code.
I am newbie to Ionic and mobile development. I am using ionic list, how to make text full available screen (see Last received in picture) and is it okay to use <ion-label> around <h4> and <p>?
<ion-list>
<ion-item *ngFor ="let connection of connections">
<ion-avatar slot="start">
<img [src]="connection?.picture">
</ion-avatar>
<ion-label text-wrap>
<h4>{{ connection?.name}}</h4>
<p text-wrap> Last received: {{ connection?.locationDesc }}</p>
</ion-label>
<ion-label slot="end" text-right>
<p item-end> 2 Messages </p>
<ion-button clear slot="end">View</ion-button>
</ion-label>
</ion-item>
It looks like it's just taking a little bit but what its actually doing is sharing 50 50 with the two labels you have put in to use as columns. It looks like its taking less than half because of the word-wrapping.
This is because labels are styled as flex items with those rules.
I managed to get it to this:
By using this code:
<ion-list>
<ion-item>
<ion-avatar slot="start">
<img src="/assets/matthew.jpg">
</ion-avatar>
<ion-label class="ion-text-wrap">
<h4>Some name</h4>
<p> Last received: All plugins have two components - the native code (Cordova) and the
JavaScript code. Cordova plugins are also wrapped in a Promise or Observable in order to provide a common
plugin interface. Below are various framework options using the Camera plugin as an example. </p>
</ion-label>
<ion-note class="ion-text-end">
<p> 2 Messages </p>
<ion-button clear>View</ion-button>
</ion-note>
</ion-item>
</ion-list>
Basically I swapped the last ion-label to be an ion-note instead.
I have also messed around with other things like removing slots that weren't required and converting the attributes to appropriate utility classes which is now considered a best-practice (since they introduced react and vue which don't support these attributes).
For the last couple of days I have been trying to learn ionic because i have a school project and its so hard i dont even know where to begin .I had created an android app but my school kept on saying you gotta do it on ionic and as a "good" student i accepted.Are there any good guides? I cant seem to find any.
Also i want to create a list that has an icon on the left and some text on the middle.I want to make the icon and the text a little bigger but i have no idea how.Here is the code:
<ion-list>
<ion-item>
<ion-icon item-left name="moon"></ion-icon>
<h3>Bedrooms</h3>
</ion-item>
I would like to suggest you to go through documentation. And there are many tutorial video for latest ionic in youtube. That will help you alot.
and for your current font size issue, please try to edit either scss file for the given page but better update the sass variable in theme/variables.scss(please find a short tutorial here).
$item-md-font-size
<ion-list>
<ion-item>
<ion-grid>
<ion-row>
<ion-col col-2>
<ion-icon item-left name="moon"></ion-icon>
</ion-col>
<ion-col col-8>
<h3 ion-text text-center>Bedrooms</h3>
</ion-col>
<ion-row>
<ion-grid>
</ion-item>
<ion-list>
SCSS
ion-icon{
font-size: 25px!important
}
h3{
font-size: 30px!important
}
Here is documentation
https://ionicframework.com/docs/theming/css-utilities/
https://ionicframework.com/docs/theming/responsive-grid/
I work on a Ionic v3 app and I'm trying to display HTML in a *ngFor.
I've my TestPage.html with :
<ion-list *ngFor="let c of cities">
<ion-item>
<div [innerHTML]="c.html_rate"></div>
</ion-item>
</ion-list>
In c.html_rate I've some <ion-icon name="star-half"></ion-icon>.
But on the screen nothing appear...
I've also try: <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(c.html_rate)"></div>
But that does not work...
As shown in another question ion-item can only render particular elements. You are attempting to render an ion-icon within the ion-item component which doesn't work.
You can test this is true simply by replacing what is being injected into your div. If you swap <ion-icon name="star-half"></ion-icon> for <ion-note>Testing</ion-note>
When parsing rss feed in xml format, I display the images that are contained in the attibute url inside the tag <enclosure> but whenever the tag enclosure is missing because the article does not have an image, I'm getting an error in the console saying:
Cannot read property 'getAttribute' of undefined
I tried to solve this problem using onError function inside src but when the tag is missing I'm still getting the error in the console and the placeholder image is not shown.
Here's my html file:
<ion-header>
<ion-navbar color="primary">
<ion-title text-center>
App Name
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let entry of entries" (click)="openPage(entry)" text-wrap>
<ion-thumbnail>
<img class="imgmg" src="{{entry.getElementsByTagName('enclosure')[0].getAttribute('url')}}" onError="this.src='assets/images/placeholder_image.png';" >
</ion-thumbnail>
<h2 class="title">{{entry.getElementsByTagName('title')[0].textContent}}</h2>
</ion-item>
</ion-list>
</ion-content>
You can use *ngif. example:
<img *ngIf="entry.getElementsByTagName('enclosure')[0].getAttribute('url')" class="imgmg" src="{{entry.getElementsByTagName('enclosure')[0].getAttribute('url')}}">
<img *ngIf="!entry.getElementsByTagName('enclosure')[0].getAttribute('url')" class="imgmg" src="assets/images/placeholder_image.png">
also check this link
EDIT:
<img *ngIf="image_available" class="imgmg" src="{{entry.getElementsByTagName('enclosure')[0].getAttribute('url')}}">
<img *ngIf="!image_available" class="imgmg" src="assets/images/placeholder_image.png">