Issue
Im trying to figure out how to do something with my dart project and I am not really sure where to start. To preface this, Dart is the first language that I am learning fully. I have put over 100 hours into training and building this project over the past few months. This is also my first major project in the language, and I really am loving what I have been able to come up with.
Here is the layout of one of my Project Board pages. This is the Dashboard page. On my web app, I am receiving data from a Mongo Db using mongo_dart on a dart server. I am then taking the data and serializing it into what I believe is a List. I am creating a card for each project that includes some basic information about the project (That info is from the database). Oh this card I want to include all of the “project tasks” (that I put into material-chips using ngFor), but there will be upwards of 10+ tasks per project, which takes up a lot of room on the page. So to save space, I would like for the card to show only 3 tasks at a time, then rotate to the next 3 after a few seconds, and so on. So each card will have 3 chips, then the chips will change to the next 3, etc. The goal is to make a page that someone can glimpse at and quickly see the open projects and the tasks/who the task is assigned to and what the status is. being able to see 5-10 project cards on a page is ideal. I believe I can use Angular Animations to hide/remove portions of my map, then set up a timer for the transition to reveal the next , but again I have no idea how to start this.
I am posting the HTML below but I am more than happy to post any more info that you may need. I am running Dart Version 2. Also, I know my code is not the prettiest. I am still learning so any input on improvements I can make will be super helpful! Also if anyone has any advice on how to reuse portions of my html instead of having it copied 5 times (because of ngIf), I am open to hearing it!
<div class="dash">
<div *ngFor="let p of projectList" style="padding: 10px">
<div class="mdc-card demo-size">
<div class="mdc-card__media demo-card__media">
<div style="line-height: 1">
<material-chips class="clickable" *ngFor="let t of taskList">
<material-chip
*ngIf="t.joinID == p.id && t.tStatus == 'New'"
[removable]="false"
popupSource
#source="popupSource"
buttonDecorator
(trigger)="showPopup(source)"
materialTooltip="{{t.genNotes}}"
class="new">
<div>{{t.tName}}</div>
<div style="font-size: 10px">{{t.sTech}}</div>
<material-popup [source]="popSource"
[(visible)]="showingPopup"
[enforceSpaceConstraints]="false"
[preferredPositions]="[position]">
<div header style="background: lightblue; color: black; font-weight: bold; line-height: 1.8; text-align: center">
Select Project Status
</div>
<material-select width="2" class="bordered-list">
<material-select-item *ngFor="let s of statusDropdowns"
(trigger)="proto = s"
[selected]="proto == s">{{s}}</material-select-item>
</material-select>
</material-popup>
</material-chip>
<material-chip
*ngIf="t.joinID == p.id && t.tStatus == 'In Progress'"
[removable]="false"
popupSource
#source="popupSource"
buttonDecorator
(trigger)="showPopup(source)"
materialTooltip="{{t.genNotes}}"
class="inprogress">
<div>{{t.tName}}</div>
<div style="font-size: 10px">{{t.sTech}}</div>
<material-popup [source]="popSource"
[(visible)]="showingPopup"
[enforceSpaceConstraints]="false"
[preferredPositions]="[position]">
<div header style="background: lightblue; color: black; font-weight: bold; line-height: 1.8; text-align: center">
Select Project Status
</div>
<material-select width="2" class="bordered-list">
<material-select-item *ngFor="let s of statusDropdowns"
(trigger)="proto = s"
[selected]="proto == s">{{s}}</material-select-item>
</material-select>
</material-popup>
</material-chip>
<material-chip
*ngIf="t.joinID == p.id && t.tStatus == 'On Hold'"
[removable]="false"
popupSource
#source="popupSource"
buttonDecorator
(trigger)="showPopup(source)"
materialTooltip="{{t.genNotes}}"
class="onhold">
<div>{{t.tName}}</div>
<div style="font-size: 10px">{{t.sTech}}</div>
<material-popup [source]="popSource"
[(visible)]="showingPopup"
[enforceSpaceConstraints]="false"
[preferredPositions]="[position]">
<div header style="background: lightblue; color: black; font-weight: bold; line-height: 1.8; text-align: center">
Select Project Status
</div>
<material-select width="2" class="bordered-list">
<material-select-item *ngFor="let s of statusDropdowns"
(trigger)="proto = s"
[selected]="proto == s">{{s}}</material-select-item>
</material-select>
</material-popup>
</material-chip>
<material-chip
*ngIf="t.joinID == p.id && t.tStatus == 'Critical'"
[removable]="false"
popupSource
#source="popupSource"
buttonDecorator
(trigger)="showPopup(source)"
materialTooltip="{{t.genNotes}}"
class="critical">
<div>{{t.tName}}</div>
<div style="font-size: 10px">{{t.sTech}}</div>
<material-popup [source]="popSource"
[(visible)]="showingPopup"
[enforceSpaceConstraints]="false"
[preferredPositions]="[position]">
<div header style="background: lightblue; color: black; font-weight: bold; line-height: 1.8; text-align: center">
Select Project Status
</div>
<material-select width="2" class="bordered-list">
<material-select-item *ngFor="let s of statusDropdowns"
(trigger)="proto = s"
[selected]="proto == s">{{s}}</material-select-item>
</material-select>
</material-popup>
</material-chip>
<material-chip
*ngIf="t.joinID == p.id && t.tStatus == 'Canceled'"
[removable]="false"
popupSource
#source="popupSource"
buttonDecorator
(trigger)="showPopup(source)"
materialTooltip="{{t.genNotes}}"
class="canceled">
<div>{{t.tName}}</div>
<div style="font-size: 10px">{{t.sTech}}</div>
<material-popup [source]="popSource"
[(visible)]="showingPopup"
[enforceSpaceConstraints]="false"
[preferredPositions]="[position]">
<div header style="background: lightblue; color: black; font-weight: bold; line-height: 1.8; text-align: center">
Select Project Status
</div>
<material-select width="2" class="bordered-list">
<material-select-item *ngFor="let s of statusDropdowns"
(trigger)="proto = s"
[selected]="proto == s">{{s}}</material-select-item>
</material-select>
</material-popup>
</material-chip>
</material-chips>
</div>
</div>
<div class="demo-card__primary">
<h2 class="demo-card__title">{{p.name}}</h2>
<h3 class="demo-card__subtitle">{{p.projectMan}}</h3>
</div>
<div class="demo-card__secondary">
{{p.description}}
</div>
</div>
Solution
So AngularDart itself doesn’t have anything special for animations. We tend to just use CSS animations and generally haven’t missed them.
I could see a couple of different ways of doing this:
- Have all the entities in the DOM all the time, but make sure that overflow is hidden for the area the chips are in. Then on the timer translate the chips so that different ones are in the viewport.
- Change the list entries on a timer. This would have the problem of not animating, but it would be the easiest.
- Have two lists. Animate the first list away, and animate the second list in.
Glad you are liking using Dart and AngularDart.
Answered By – Ted Sander
Answer Checked By – Cary Denson (FlutterFixes Admin)