title: Unexpected closing tag | angular2.5 | custom tags
body: <pre><code>&lt;someTag data_value="somevalue" class="card"&gt;
      &lt;div class="some" *ngFor='let item of tempData'&gt;
          &lt;someTag data_value="somevalue" class="text-align-center"&gt;
              &lt;span class="fs-6"&gt;{{ item.id }}&lt;/span&gt;
          &lt;/someTag&gt;
          &lt;someTag data_value="somevalue" class="text-align-center"&gt;
              &lt;span class="fs-6"&gt;{{ item.name }}&lt;/span&gt;
          &lt;/someTag&gt;
          &lt;someTag data_value="somevalue" class="text-align-center"&gt;
              &lt;span class="fs-6"&gt;{{ item.status }}&lt;/span&gt;
          &lt;/someTag&gt;
          &lt;someTag data_value="somevalue" class="text-align-center"&gt;
              &lt;span class="fs-6"&gt;{{ item.sent }}&lt;/span&gt;
          &lt;/someTag&gt;
          &lt;someTag data_value="somevalue" class="text-align-center"&gt;
              &lt;span class="fs-6"&gt;{{ item.views }}&lt;/span&gt;
          &lt;/someTag&gt;
          &lt;someTag data_value="somevalue" class="text-align-center"&gt;
              &lt;span class="fs-6"&gt;{{ item.clicks }}&lt;/span&gt;
          &lt;/someTag&gt;
          &lt;someTag data_value="somevalue" class="text-align-center"&gt;
              &lt;span class="fs-6"&gt;{{ item.source }}&lt;/span&gt;
          &lt;/someTag&gt;
          &lt;someTag data_value="somevalue" class="text-align-center"&gt;
              &lt;span class="fs-6"&gt;{{ item.created }}&lt;/span&gt;
          &lt;/someTag&gt;
          &lt;someTag data_value="somevalue" class="text-align-center"&gt;
              &lt;span class="fs-6"&gt;{{ item.report }}&lt;/span&gt;
          &lt;/someTag&gt;
          &lt;someTag data_value="somevalue"&gt;&lt;hr&gt;&lt;/someTag&gt;
      &lt;/div&gt;
  &lt;/someTag&gt;
  </code></pre>
  
  <p>When I use this code inside my main component's html file, I get the following error:</p>
  
  <pre><code>&gt; ERROR Error: Uncaught (in promise): Error: Template parse errors:
  &gt; Unexpected closing tag "sometag". It may happen when the tag has
  &gt; already been closed by another tag. For more info see
  &gt; https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
  &gt;               &lt;sometag data_value="somevalue"&gt;&lt;hr&gt;&lt;/sometag&gt;
  &gt;           &lt;/div&gt;  [ERROR -&gt;]&lt;/sometag&gt;"): ng:///someModule/someComponent.html@65:1
  </code></pre>
  
  <p>but when I make a new component :</p>
  
  <pre><code>@Component({
      selector: 'some-list',
      styleUrls:['some.component.css'],
      template: `
          &lt;div class="some" *ngFor='let x of data'&gt;
              &lt;sometag data_value="somevalue" class="text-align-center"&gt;
                  &lt;span class="fs-6"&gt;{{ x.id }}&lt;/span&gt;
              &lt;/sometag&gt;
              &lt;sometag data_value="somevalue" class="text-align-center"&gt;
                  &lt;span class="fs-6"&gt;{{ x.name }}&lt;/span&gt;
              &lt;/sometag&gt;
              &lt;sometag data_value="somevalue" class="text-align-center"&gt;
                  &lt;span class="fs-6"&gt;{{ x.status }}&lt;/span&gt;
              &lt;/sometag&gt;
              &lt;sometag data_value="somevalue" class="text-align-center"&gt;
                  &lt;span class="fs-6"&gt;{{ x.sent }}&lt;/span&gt;
              &lt;/sometag&gt;
              &lt;sometag data_value="somevalue" class="text-align-center"&gt;
                  &lt;span class="fs-6"&gt;{{ x.views }}&lt;/span&gt;
              &lt;/sometag&gt;
              &lt;sometag data_value="somevalue" class="text-align-center"&gt;
                  &lt;span class="fs-6"&gt;{{ x.clicks }}&lt;/span&gt;
              &lt;/sometag&gt;
              &lt;sometag data_value="somevalue" class="text-align-center"&gt;
                  &lt;span class="fs-6"&gt;{{ x.source }}&lt;/span&gt;
              &lt;/sometag&gt;
              &lt;sometag data_value="somevalue" class="text-align-center"&gt;
                  &lt;span class="fs-6"&gt;{{ x.created }}&lt;/span&gt;
              &lt;/sometag&gt;
              &lt;sometag data_value="somevalue" class="text-align-center"&gt;
                  &lt;span class="fs-6"&gt;{{ x.report }}&lt;/span&gt;
              &lt;/sometag&gt;
              &lt;sometag data_value="somevalue"&gt;&lt;hr&gt;&lt;/sometag&gt;
          &lt;/div&gt;
      `,
  })
  export class ListComponent{
      @Input() data;
  }
  </code></pre>
  
  <p>and use the above new component inside the main component's file,</p>
  
  <pre><code>&lt;someTag data_value="somevalue" class="card"&gt;
       &lt;some-list [data]="tempData"&gt;&lt;/some-list&gt;
  &lt;/someTag&gt;
  </code></pre>
  
  <p>It works without error.</p>
  
  <blockquote>
    <p>Question:-
         What could be the possible reason for this?</p>
  </blockquote>
  
  <p>Yes :- <br>
   I checked end tags.<br>
   I counted end tags.<br>
   I don't have any unclosed tags since the new component is just a copy paste of this loop code.</p>