Animation of new data as it arrives in Meteor

Question

I am new to meteor and minimongo, so I lost a bit of what to do, I did research, but could not find much, because I use angular + meteorite, not blaze.

I have a collection on my server signed on my client (angular). Every time a new item is added to my server collection, the synscronise client updates minimongo and it works great.

Now I would like to create a new “event”, for example, add an animation / fade background color when a new item is added to the collection in my mongo data table (html) (iterate through the helper via ng- repeat), but cannot find a way to do this right.

I found cursors and this may do the trick, but I am having trouble figuring out how I should implement it in my angular front end.

Has anyone tried this already or could point me in the direction of my research?

thanks

Answer 1

You are right - the cursor can do the trick. And observeChanges in particular. Since you only asked to show you the direction, and I am not familiar with Anguler, I do not provide all the code, just a tip:

• Configure the table table element with the document ID to be able to access it later. ( <tr class="..." data-id="q1w2e3r4t5">...</tr> )
• Then you can bind the observer to your cursor and add the CSS class to the newly added element: cursor.observeChanges({added: (id) => $('[data-id=${id}]').addClass('animate')})

• To enable the animation, specify somewhere in your the CSS .animate any favorite animation. You can find help among other SO posts regarding this. It could be like fe

  @keyframes highlight { from {background-color: yellow;} to {background-color: white;} } .animate { animation: highlight 1s; }

Hope this works for you.

Answer 2

You are on the right track with the cursor. You can use cursor.observe (callbacks). For example, you can listen to the add event and perform animation when a new document is added.