Angular2: <li> with *ngFor not inside <ul>
<p>I'm going to create a timeline component and I have the following template</p>

<pre><code>&lt;ul *ngIf="alerts!=undefined" class="timeline"&gt;
        &lt;li *ngFor="let alert of alerts; let i=index" [class.timeline-inverted]="i % 2 == 1"&gt;
            &lt;div class="timeline-badge"&gt;
                &lt;span&gt;{{alert.type}}&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline-panel"&gt;
                &lt;div class="timeline-body"&gt;
                    &lt;p&gt;{{alert.id}}&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="timeline-footer"&gt;
                    &lt;p class=""&gt;{{alert.date}}&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
</code></pre>

<p>The corresponding <code>.scss</code> file is like</p>

<pre><code>.timeline {
    list-style: none;
    padding: 10px 0;
    position: relative;
    font-weight: 300;
    border-style: solid;
    border-width: medium;
}
.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content:" ";
    width: 6px;
    background: $magenta;
    left: 50%;
    margin-left: -3px;
}
.timeline &gt; li {
    margin-bottom: 40px;
    position: relative;
    width: 50%;
    float: left;
    clear: left;
}
.timeline &gt; li:before, .timeline &gt; li:after {
    content:" ";
    display: table;
}
.timeline &gt; li:after {
    clear: both;
}
.timeline &gt; li &gt; .timeline-panel {
    width: calc(100% - 35px);
    width: -moz-calc(100% - 35px);
    width: -webkit-calc(100% - 35px);
    float: left;
    border-radius: 5px;
    background: $white;
    position: relative;
}
.timeline &gt; li &gt; .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    content:" ";
}
.timeline &gt; li &gt; .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid $white;
    border-right: 0 solid $white;
    border-bottom: 14px solid transparent;
    content:" ";
}
</code></pre>

<p>The <code>&lt;ul&gt;</code> tag is not filled by those <code>&lt;li&gt;</code> tag created by <code>*ngFor</code> which makes the "line" of the timeline disappear.</p>

<p><a href="https://i.stack.imgur.com/Q6Clw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q6Clw.png" alt="screenshot"></a></p>

<p>The black border is the border of the <code>&lt;ul&gt;</code> tag, which is suppose to wrap all <code>&lt;li&gt;</code> tags below it and have the magenta line go through all bubbles. </p>