feat(component): clear LetDirective view when replaced observable is in suspense state

[markostanimirovic]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https:/ngrx/platform/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Documentation has been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

The LetDirective view will not be cleared when the replaced observable is in a suspense state and the suspense template is not passed.

What is the new behavior?

The LetDirective view will be cleared when the replaced observable is in a suspense state and the suspense template is not passed.

Does this PR introduce a breaking change?

[x] Yes
[ ] No

BREAKING CHANGES:

The LetDirective view will be cleared when the replaced observable is in a suspense state. Also, the suspense property is removed from the LetViewContext because it would always be false when the LetDirective view is rendered. Instead of suspense property, use the suspense template to handle the suspense state.

BEFORE:

The LetDirective view will not be cleared when the replaced observable is in a suspense state and the suspense template is not passed:

@Component({
  template: `
    <!-- When button is clicked, the 'LetDirective' view won't be cleared. -->
    <!-- Instead, the value of 'o' will be 'undefined' until the replaced -->
    <!-- observable emits the first value (after 1 second). -->
    <p *ngrxLet="obs$ as o">{{ o }}</p>
    <button (click)="replaceObs()">Replace Observable</button>
  `
})
export class TestComponent {
  obs$ = of(1);

  replaceObs(): void {
    this.obs$ = of(2).pipe(delay(1000));
  }
}

AFTER:

The LetDirective view will be cleared when the replaced observable is in a suspense state and the suspense template is not passed:

@Component({
  template: `
    <!-- When button is clicked, the 'LetDirective' view will be cleared. -->
    <!-- The view will be created again when the replaced observable -->
    <!-- emits the first value (after 1 second). -->
    <p *ngrxLet="obs$ as o">{{ o }}</p>
    <button (click)="replaceObs()">Replace Observable</button>
  `
})
export class TestComponent {
  obs$ = of(1);

  replaceObs(): void {
    this.obs$ = of(2).pipe(delay(1000));
  }
}

[netlify]

✅ Deploy Preview for ngrx-io ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	ac9412b
🔍 Latest deploy log	https://app.netlify.com/sites/ngrx-io/deploys/637cc8e3430be8000853ca91
😎 Deploy Preview	https://deploy-preview-3671--ngrx-io.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.