Angular Ionic Search function as Pass ngFor/If data
Budget: $10 – $30 AUD
I have a PoC Angular and Ionic app that is almost completed but I need some assistance with with two last features and our main developer has had to take leave.
Dummy Service with nested JSON array for PoC. Nested array displays fine on list page but the ngFor data doesn't come through to the item page.
Filtering on details needs to be setup. Static code is below:
<ion-input type="text" placeholder="Search Sire" [(ngModel)]="searchTerm" animated="true"></ion-input>
<ion-label>Birth Weight</ion-label>
<ion-range dualKnobs="true" [(ngModel)]="minMaxValues">
<ion-label slot="start">0</ion-label>
<ion-label slot="end">10</ion-label>
</ion-range>
<ion-label>Calving Easing</ion-label>
<ion-range dualKnobs="true" [(ngModel)]="minMaxValues">
<ion-label slot="start">0</ion-label>
<ion-label slot="end">10</ion-label>
</ion-range>
</div>
<div *ngFor="let detail of item.animalDetails">
<div class="grey_line_div"></div>
<div class="general_detail" (click)="navigateToNestedDetail(detail)">
<ion-label>Animal ID: {{detail.animalID}}</ion-label>
<ion-label>Sire: {{detail.sire}}</ion-label>
<ion-label>Calving Ease Direct: {{detail.ced}}</ion-label>
<ion-label>Birth Weight: {{detail.birthWeight}}</ion-label>
<ion-label>200 Day Growth: {{detail.thdg}}</ion-label>
<ion-label>Eye Muscle Area: {{detail.ema}}</ion-label>
<ion-label>Rump Fat: {{detail.rumpFat}}</ion-label>
<ion-label>Angus Breeding Index: {{detail.abi}}</ion-label>
<img src={{detail.img}}>
</div>
This requires a string search and Ionic Dual Knobs based on the details in the dummy service.
The screenshots show the intended search and blank data in the nest item page.
Required within the next 24 hours.
Source Code provided via BitBucket. Ongoing Work may be available.
Dummy Service with nested JSON array for PoC. Nested array displays fine on list page but the ngFor data doesn't come through to the item page.
Filtering on details needs to be setup. Static code is below:
<ion-input type="text" placeholder="Search Sire" [(ngModel)]="searchTerm" animated="true"></ion-input>
<ion-label>Birth Weight</ion-label>
<ion-range dualKnobs="true" [(ngModel)]="minMaxValues">
<ion-label slot="start">0</ion-label>
<ion-label slot="end">10</ion-label>
</ion-range>
<ion-label>Calving Easing</ion-label>
<ion-range dualKnobs="true" [(ngModel)]="minMaxValues">
<ion-label slot="start">0</ion-label>
<ion-label slot="end">10</ion-label>
</ion-range>
</div>
<div *ngFor="let detail of item.animalDetails">
<div class="grey_line_div"></div>
<div class="general_detail" (click)="navigateToNestedDetail(detail)">
<ion-label>Animal ID: {{detail.animalID}}</ion-label>
<ion-label>Sire: {{detail.sire}}</ion-label>
<ion-label>Calving Ease Direct: {{detail.ced}}</ion-label>
<ion-label>Birth Weight: {{detail.birthWeight}}</ion-label>
<ion-label>200 Day Growth: {{detail.thdg}}</ion-label>
<ion-label>Eye Muscle Area: {{detail.ema}}</ion-label>
<ion-label>Rump Fat: {{detail.rumpFat}}</ion-label>
<ion-label>Angus Breeding Index: {{detail.abi}}</ion-label>
<img src={{detail.img}}>
</div>
This requires a string search and Ionic Dual Knobs based on the details in the dummy service.
The screenshots show the intended search and blank data in the nest item page.
Required within the next 24 hours.
Source Code provided via BitBucket. Ongoing Work may be available.