Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@ngrx/component: Add ability to pass "non-Observable" values #3345

Closed
markostanimirovic opened this issue Mar 9, 2022 · 2 comments
Closed

Comments

@markostanimirovic
Copy link
Member

It can be useful to have aliases in the template for nested properties. For example, the LetDirective could be used as follows:

<span *ngrxLet="form.controls.name.valid as isValid">{{ isValid }}</span>

The input type will be ObservableInput<T> | T which will also solve the typing issues mentioned in #3344.

Additional change to consider: Treat arrays as "non-Observable" values.

Current behavior:

@Component({
  selector: 'ngrx-array',
  template: `
    <!-- the value of `a` is equal to the last element of array -->
    <p *ngrxLet="array as a">{{ a }}</p>
  `,
})
export class ArrayComponent {
  array = [1, 2, 3, 4, 5];
}

Behavior with proposed change:

@Component({
  selector: 'ngrx-array',
  template: `
    <!-- the value of `a` is equal to array -->
    <p *ngrxLet="array as a">{{ a }}</p>
  `,
})
export class ArrayComponent {
  array = [1, 2, 3, 4, 5];
}
@markostanimirovic markostanimirovic added this to To do in NgRx 14 via automation Mar 9, 2022
@markostanimirovic markostanimirovic self-assigned this Mar 9, 2022
brandonroberts pushed a commit that referenced this issue May 28, 2022
BREAKING CHANGES:

1. The context of `LetDirective` is strongly typed when `null` or
`undefined` is passed as input.

BEFORE:

```html
<p *ngrxLet="null as n">{{ n }}</p>
<p *ngrxLet="undefined as u">{{ u }}</p>
```

- The type of `n` is `any`.
- The type of `u` is `any`.

AFTER:

```html
<p *ngrxLet="null as n">{{ n }}</p>
<p *ngrxLet="undefined as u">{{ u }}</p>
```

- The type of `n` is `null`.
- The type of `u` is `undefined`.

---

2. Arrays, iterables, generator functions, and readable streams are
not treated as observable-like inputs anymore. To keep the same behavior
as in v13, convert the array/iterable/generator function/readable stream
to observable using the `from` function from the `rxjs` package
before passing it to the `LetDirective`/`PushPipe`.

BEFORE:

```ts
@component({
  template: `
    <p *ngrxLet="numbers as n">{{ n }}</p>
    <p>{{ numbers | ngrxPush }}</p>
  `,
})
export class NumbersComponent {
  numbers = [1, 2, 3];
}
```

AFTER:

```ts
@component({
  template: `
    <p *ngrxLet="numbers$ as n">{{ n }}</p>
    <p>{{ numbers$ | ngrxPush }}</p>
  `,
})
export class NumbersComponent {
  numbers$ = from([1, 2, 3]);
}
```
@brandonroberts
Copy link
Member

Closed via #3440

NgRx 14 automation moved this from To do to Done May 29, 2022
@DibyodyutiMondal
Copy link

DibyodyutiMondal commented Jul 30, 2022

 <ng-container *ngrxLet="[timeSlice.mergeCells.month(period)] as months;">
   <div *ngFor="let monthCell of months; let i = index" [class.month-end]="i !== months.length - 1">
     {{monthCell.data.dt.monthShort}}, {{monthCell.data.dt.year}}
   </div>
</ng-container>

The function timeSlice.mergeCells.month(period) returns an array of objects that I want to iterate over.
But I also need the full array, because I need the array length to get the array's last item's index and use that to apply a certain class if it is the last item.

However, if I do not wrap the call in square braces and make an artificial array (like I have done above), then I cannot use ngFor inside the ngrxLet directive, because ngrxLet unwraps the array for me.

I assume this is intended behaviour, and the workaround is very very simple, but it would be nice to do this via an option to the directive, so that it becomes obvious to others what I'm trying to do.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

No branches or pull requests

3 participants