codelab-fun / codelab

Interactive Angular Codelab 🦋 Learn Angular basics online without setup
https://codelab.fun
Apache License 2.0
221 stars 63 forks source link

Wrap slide directive #1250

Open tarsisexistence opened 4 years ago

tarsisexistence commented 4 years ago

The following code outputs the incorrect sequence

  <!--1111111111111111111111111111-->
  <div *slide no-padding>
    <codelab-title-slide
      title="Introduction to Codelab"
      i18n-title="@@Introduction"
      description="Now let's talk about what Angular is and what awaits you on the Codelab platform."
      i18n-description
    ></codelab-title-slide>
  </div>

  <!--222222222222222222222222222-->
  <div *ngFor="let slide of presentation">
    <div *slide milestone="Intro">
      <img
        class="image"
        src="/assets/images/presentation/{{ slide }}.png"
        alt=""
      />
    </div>
  </div>

  <!--333333333333333333333333333333-->
  <div *slide id="end">
    <codelab-closing-slide>
      <div class="header" header>
        <codelab-breadcrumb i18n>End of Introduction</codelab-breadcrumb>
      </div>
      <div class="footer" footer>
        <h2>
          <ng-container i18n>Next:</ng-container>
          <a routerLink="../../create-first-app/0" i18n>
            Go to the Create First App milestone
          </a>
        </h2>
      </div>
    </codelab-closing-slide>
  </div>

AR: 1, 3, 2 ER: 1, 2, 3

It occurs when we wrap any *slide directive inside another structural directive The temporal solution is to wrap third* (3) section inside unnecessary ngIf** which is not good

Today we discussed this with @kirjs, and according to him, this is a bug that should be fixed.