5

I'm new to meteor and minimongo so i'm a bit lost as to what to do , i've done research but couldn't find much since i'm using angular+meteor and not blaze.

I have a collection on my server that is subscribed on my client ( angular). Every time a new element is added to my server collection the client synscronise and update minimongo and it's working fine.

Now i would like to style this new "event" ,for example adding an animation / fading background color when a new element is added to the collection in my table(html) of mongo data( iteration on the helper through ng-repeat) but can't really find a way to do that properly.

I've found Cursors and it might do the trick but i'm having trouble figuring out how should i implement it in my angular front end.

Anyone tried that already or could point me in the direction for my research ?

Thanks

user697
  • 233
  • 1
  • 7

2 Answers2

1

You're right - cursor might do the trick. And observeChanges method in particular. Since you've asked only for pointing you into the direction and I am not familiar with Anguler, I am not providing the whole code, just some advice:

  1. Populate your table row element with id of the document to be able to access it later. (<tr class="..." data-id="q1w2e3r4t5">...</tr>)
  2. Then you can attach an observer to your cursor and add a CSS class to the newly added element: cursor.observeChanges({added: (id) => $('[data-id=${id}]').addClass('animate')})

  3. To enable the animation define somewhere in your CSS .animate with whatever animation you like. You can find help among other SO posts regarding this. It could be like f.e.

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

Hope it works for you.

Vlad Holubiev
  • 3,398
  • 4
  • 33
  • 50
0

You are on the right track with Cursor. You can use cursor.observe(callbacks). You can listen for add event for example and do your animation when a new doc added.

Areca
  • 1,282
  • 3
  • 11
  • 21