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:-)
Related
First of all, want to emphasize that I had already have a look at many pages e.g. Two switch case values in angular but they cannot fix my problem.
I have the following approach in the html page of my Angular project and I switch according to i parameter without any problem. On the other hand, there is a parameter called loading on component side and I also need to use this value in ngSwitchCase. But the following code does not work and ignore loading parameter's value. So, how can I use it?
<ng-container [ngSwitch]="i">
<ng-container *ngSwitchCase="i === 0 && loading === true">
<!-- other stuff -->
</ng-container>
</ng-container>
Create another ng-container inside with the loading condition.
<ng-container [ngSwitch]="i">
<ng-container *ngSwitchCase="0">
<ng-container *ngIf="loading">
// do stuff
</ng-container>
</ng-container>
</ng-container>
I am using Angular 6 and Angular Angular Material,
I have dynamic list of polls with list of options. I want to show selected option with two way data binding. as my list is dynamic i want to pass variable in [(ngModel)]. tried passing variable but no luck please suggest alternate solution stackblitz example code
You were using the same variable (mySelection) for both questions. Instead, you need to use two different variables, or even better, an array. Here's the fixed version on StackBlitz and here's the relevant code.
Template
<ol>
<li *ngFor="let poll of polls;let i = index">
{{poll.name}}
<mat-radio-group class="example-radio-group" [(ngModel)]="selectedAnswers[i]">
<mat-radio-button class="example-radio-button" *ngFor="let option of poll.options" [value]="option.answer">
{{option.answer}}
</mat-radio-button>
</mat-radio-group>
<strong>Seleted Answer : {{selectedAnswers[i]}}</strong>
<button [disabled]="selectedAnswers[i]==undefined" mat-raised-button color="accent">save</button>
</li>
</ol>
<pre>{{ selectedAnswers | json }}</pre>
Component
#Component({
/* ... */
})
export class AppComponent {
selectedAnswers = []
polls = [
/* ... */
]
}
I have this html code
<empty-list [hidden]="!emptylist" text="There is currently No User"</empty-list>
<div *ngFor="let userObser of userObservables">
<ion-item #emptylist *ngIf="userObser | async as user">
<h2>{{user.displayName}}</h2>
<h3>{{user.email}}</h3>
</ion-item>
</div>
I want to show the empty list if there is no user & hide it if there is at least one.
I know I can do it using a subscribe method,but I want to use async pipe also I need to unsubscribe each time I use a subscribe which is really not efficient.
My question is there a way I could create a local variable inside the ion-item the ntest test if it exists outside & therefore use it in the hidden input ? It's just a suggestion I can't really seem to make it work.
You can use a simple else inside the ngIf to display another template if the condition doesn't match:
<ng-container *ngIf="userObservables.length > 0; else emptyList">
<ng-container *ngFor="let user of userObservables">
<ion-item *ngIf="user | async as user">…</ion-item>
</ng-container>
</ng-container>
<ng-template #emptyList>
<empty-list>…</empty-list>
</ng-template>
Note that I also replaced your seemingly unnecessary div with a ng-container to avoid unnecessary DOM nodes.
As a side note to your own suggestion: template references cannot be accessed from outside the template boundary. Structural directives like *ngIf and *ngFor create their own template, so this becomes a boundary. That's why
<h2>{{ ref.innerText }}</h2>
<ng-container>
<span #ref>Hello, World</span>
</ng-container>
will work, but
<h2>{{ ref.innerText }}</h2>
<ng-container *ngIf="true">
<span #ref>Hello, World</span>
</ng-container>
won't work.
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>
how to access the index of a ng-repeat?
I have the following code:
<ion-item ng-repeat="item in items track by $index" href="#/tab/friend/$index">
foo
</ion-item>
then I click a item from the list I get to: http://localhost:8100/#/tab/friend/$index
But I want to get to e.g. http://localhost:8100/#/tab/friend/12
what did I wrong?
Angular variables are only recognized automatically within ng- attributes. To use those variables within regular html attributes, you must use double braces:
<ion-item ng-repeat="item in items track by $index" href="#/tab/friend/{{$index}}">
foo
</ion-item>
You have placed $index in the string and there is no way for angular to know that it's an expression. To make angular evaluate it, you need to use it as an expression e.g. {{ $index }}. Modify your href as
href="#/tab/friend/{{$index}}"