You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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> `,})exportclassArrayComponent{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> `,})exportclassArrayComponent{array=[1,2,3,4,5];}
The text was updated successfully, but these errors were encountered:
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]);
}
```
<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.
It can be useful to have aliases in the template for nested properties. For example, the
LetDirective
could be used as follows: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:
Behavior with proposed change:
The text was updated successfully, but these errors were encountered: