Angular2: Handling multiple possible containers for a Component based on Component variables
<p>In transitioning/considering angular2 as a replacement for my own self built user interface framework. I'm still stuck on some issues.</p>

<p>One of the issues is <strong>components needing to switch between containers</strong> and having <strong>a lot of possible containers for a component</strong> based on <strong>component variables that might change over time</strong>.</p>

<p>Let's say we have a monthly calendar, on the top we have locations and on the left we have days.</p>

<p>And let's say we have 30 days and 50'ish locations, all need to be shown at once (some of it is behind scrollbars).</p>

<p>This gives us 1500 cells.</p>

<p>Activities have a date and a location and should be rendered inside one of these cells based on their date and location.</p>

<ol>
<li><strong>How to, in Angular2, render +- 600 activities inside the correct containers on initial render</strong>?</li>
<li><strong>How to, in Angular2, correctly rerender (or remove/add) activities when their location or date changes (either by actions taken in the interface or the server pinging the interface that an activity has changed location or date)</strong>?</li>
</ol>

<p>I understand how to do this in simple lists of components and I've spent around 30 hours on learning angular2 and observables.</p>

<p>But I'm still not sure how to implement this correctly in angular2.</p>

<p>I'm sure my brain is just hung up on old ways of doing things and I feel I'm in need of a spark to get things going again.</p>

<p>PS: In my own framework it's the component that decides who it's parent/container will be, that makes these (1, 2) questions trivial. But my own framework has it's own issues (and; only 1 maintainer, no good training resources, not built by an army of developers, no sanity checks).</p>

<p><strong>update</strong></p>

<p>In code it might look a little like this;</p>

<ol>
<li>calculate current month</li>
<li>get list of days in month</li>
<li>get activities from db based on current month</li>
<li>get locations from db</li>
<li>make a table that has locations for columns and days for rows, each cell in the table might be an Angular2 component that has/represents a date and a location</li>
<li>assign activities to the correct Angular2 date/location cell component</li>
<li>listen to changes in the database via a stream</li>
<li>if an activity changed location or date, re-assign the activity to the correct date/location cell component</li>
</ol>

<p><strong>I'm stuck on 6 and 8</strong></p>