I'm trying to code a very simple calendar displayer for my ionic app (it's basically just Angular). I'm storing informations for each date in an array displayedCal.
It bugs when I'm trying to make a new row for each week using *ngIf="(i%7)==0" : this gives me a parse error. What would be the correct way of doing this?
<template ngFor let-d [ngForOf]="displayedCal" let-i="index">
<ion-row *ngIf="(i%7)==0">
<ion-col (click)="...">{{d.displayedDate}}</ion-col>
</ion-row *ngIf="(i%7)==0">
</template>
Note to non-ionic developpers <ion-row> and <ion-col> are pretty much like a <tr>/<td> structure ...
N.B.: If I just remove the ngIf my code is actually working.
ngIf applies to the whole block, not just your line of code. But even if this would work it still doesn't make sense for your purpose.
You could change your displayedCal array to a multidimensional array in this form: displayedCal[week][day] and then make a nested loop:
<template *ngFor="let week of displayedCal">
<ion-row *ngFor"let day of week">
<ion-col (click)="...">{{day.whatever}}</ion-col>
</ion-row>
</template>
However date and time is a delicate matter. You should consider your data model carefully.
I did not want to do a [week][day] structure because it kind of breaks my other features workflow. Anyways since it did not work as I wanted I finally adopted your pattern and this is what I came up with :
<template ngFor let-week [ngForOf]="displayedCal" let-i="index">
<ion-row>
<ion-col *ngFor="let day of week" (click)="...">{{day.displayedDate}}</ion-col>
</ion-row>
</template>
Thank you very much for your help! :)
Related
I have a problem with pagination, i want to make a push to some pages with the same instruction. This is the instruction:
gotoCollection(idCollection){
this.navCtrl.push(idCollection + 'Page'); }
Depending of the CollectionId parameter the push go to one page or another, but the problem is that if i put in push directly the name, for example testPage it works but if i contruct testPage like idCollection+'Page' it doesn't work.
It's because one is testPage and the other 'testPage'?
That's my template code:
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col *ngFor="let collection of collections" col-6 col-sm-3 col-md-3 col-lg-2 col-xl-2>
<img (click)="gotoCollection(collection.id)" class="card-size" [src]="collection.url">
<p><strong>The collection ID is: {{collection.id}}</strong></p>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Thanks!
You have 2 options.. have logic that says something like if id == 1 then this.navCtrl.push(1Page) else if (id = 2) etc ... in which case you need to import all of your pages beforehand. The other option is to use Lazy Loading, and there you can use strings to open the page.
Here is an example of Lazy Loading app that uses it from the creators of ionic github.com/mhartington/lazyLoad2-components.
I am attempting to filter a list of items the code below worded fine in angular js on the web but we can't expect Ionic to work now can we?
<ion-list *ngIf="items.length">
{{items[0].title}}
<ion-item ng-repeat="item in items | filter:searchLog">
{{item == undefined}}
<!--<ion-icon name="clipboard" item-left></ion-icon>
<h2><b>Title: {{item.title}}</b></h2>
<h3><b>Caller: {{item.caller.name}} - {{item.caller.number}}</b></h3>
<h3><b>Location: {{item.caller.location}}</b></h3>
<h3><i>Dispatcher: </i>{{item.dispatcher.name}} at {{item.timeStamp}}</h3>
<h3><b>Dropped: {{item.canceled}}</b></h3>
<h3 style="white-space: normal;"><i>Details:</i> {{item.details}}</h3>-->
</ion-item>
</ion-list>
This is what my screen shows:
car out of gas
true
For the life of me I cannot understand this because if I print {{ items[0].title }} it works fine in the repeat list meaning that it is not giving me this item object back from the ng-repeat call. What is even weirder is that *ngFor works but I cannot filter it :-( Please help
TL;DR: ng-repeat in angular is returning one undefined object.
Use *ngFor with pipe (i.e. filter). If it is still not working then there is some problem with your pipe (filter). Code should look like below:
<ion-list *ngIf="items.length">
{{items[0].title}}
<ion-item *ngFor="let item of items | searchLog">
<ion-icon name="clipboard" item-left></ion-icon>
<h2><b>Title: {{item.title}}</b></h2>
<h3><b>Caller: {{item.caller.name}} - {{item.caller.number}}</b></h3>
<h3><b>Location: {{item.caller.location}}</b></h3>
<h3><i>Dispatcher: </i>{{item.dispatcher.name}} at {{item.timeStamp}}</h3>
<h3><b>Dropped: {{item.canceled}}</b></h3>
<h3 style="white-space: normal;"><i>Details:</i> {{item.details}}</h3>
</ion-item>
</ion-list>
I am trying to use ngIf within an ngFor but it's just breaking my code. Below is my code:
<ion-row *ngIf="{{i % 3}}===0" *ngFor="let category of categories; let i=index">
I need to check if the index mod 3 is equal to zero
You can overwrite your code like:
<ion-row *ngFor="let category of categories; let i=index">
<ng-container *ngIf="{{i % 3}}===0">
...
</ng-container>
</ion-row>
ng-container behaves the same as template but you can use common syntax like *ngIf and *ngFor
you can't put ngIf on the same component as ngFor
Angular disallows such construction
Using i before initializing it in ngFor will never work
If you *ngIf gets a false value the *ngFor would never be created in the first place - see point 1:-)
So far I've read https://angular.io/docs/ts/latest/guide/router.html#!#router-link and https://auth0.com/blog/2015/05/14/creating-your-first-real-world-angular-2-app-from-authentication-to-calling-an-api-and-everything-in-between/
but they're a bit too dense for my level and I'm getting lost easily.
So I thought about asking if there is a simpler way of doing what I want, or if there's another way of looking at the problem.
Currently I have "half" a webpage built
http://plnkr.co/edit/BcyPlw?p=preview
, in angular2, in which I use js and ts functions to get some D3 and some maps working:
<div layout="row" layout-wrap flex>
<div flex="50" *ngFor="#item of items">
<md-checkbox [checked]="exists(item, selected)" (click)="toggle(item, selected)">
{{ item }} <span *ngIf="exists(item, selected)">selected</span>
</md-checkbox>
</div>
</div>
The idea now is to add URIs to events such as: if you click calendar, trigger an event so that I can return which cars were used in a given date, or which sessions does a car have in a given date, since I have created a webservice in java that is waiting to get something like:
#GET
#Path("/getData/{car}/{session}")
So the uri I am working with in the webservice (which I tested and works, and I want to connect with what I have in angular2 via tomcat) would be something like:
http://localhost:8080/Project/rest/projectName/getData/55/99
So I believe that is done with routing but 1º I haven't found examples that go deeper than /path (so, not /path/getData/data/data , in this case) , and 2º I am not really getting how to use what can be seen in the official tutorial { path: 'hero/:id', component: HeroDetailComponent }];
It is quite confusing and as of right now I do not feel I have the level to do all those steps (and there are many that I don't need, either), it all seems too complex
I am converting someone else's code to Handlebars.js and I'm stuck on converting this tag to its {{#handle-bar}}{{/handle-bar}} counterpart.
The previous coder used an {{#ifCond}} to toggle what 'selected'. This is my component.
{{#dropdown-item }}
{{unbound this.itemName}}
{{/dropdown-item}}
Here is the div i want converted to my component
<div class="dropdownItem" {{bind-attr value=formField_DropdownItemID}}{{#ifCond formField_DropdownItemID value}} selected{{/ifCond}} >
{{unbound this.itemName}}
</div>
My first thought was to just pop the div's logic into the the component, like the next example, but this gave me an error.
{{#dropdown-item bind-attr value=formField_DropdownItemID {{#ifCond formField_DropdownItemID value}} selected{{/ifCond}} }}
{{unbound this.itemName}}
{{/dropdown-item}}
Any suggestions?
You can set those properties to compute. The syntax would be:
{{#dropdown-item selected=computedProperty value=formField_DropdownItemID}}
computedProperty can deal with your conditional logic. The whole idea is to pull that out of handlebars anyways. :)