Class SimpleComponent

packages/platform-server/test/incremental_hydration_spec.ts:138–170

        class DepB {}

        @Component({
          selector: 'app',
          imports: [DepB],
          template: `
            <main (click)="fnA()">
              @defer (on viewport; hydrate on interaction) {
                <div (click)="fnA()">
                  Main defer block rendered!
                  @if (visible) {
                    Defer events work!
                  }
                  <div id="outer-trigger" (mouseover)="showMessage()"></div>
                  @defer (on viewport; hydrate on interaction) {
                    <p (click)="fnA()">Nested defer block</p>
                    <dep-b />
                  } @placeholder {
                    <span>Inner block placeholder</span>
                  }
                </div>
              } @placeholder {
                <span>Outer block placeholder</span>
              }
            </main>
          `,
        })
        class SimpleComponent {
          items = [1, 2, 3];
          visible = false;
          fnA() {}
          showMessage() {
            this.visible = true;
          }
        }

        const appId = 'custom-app-id';
        const providers = [{provide: APP_ID, useValue: appId}];