How can I use async/await with the angular lifecycle?

[becksky]

Describe the bug

" No results" if the iterator value is behind of an await function.

How to reproduce

Steps to reproduce the behavior:

1. Create a clr-combobox-container in html
   <clr-option *clrOptionItems="let state of states; field:'name'" [clrValue]="state">

2. Define the iterator states in ts file in a async function, for example:
   states: any[] async ngOnInit(): Promise<void> { await this.demo() this.states = ['state1', 'state2', 'state3']

3. Check the select box, there is no results

Expected behavior

The option "state1","state2","state3" should be displayed in the box

Versions

Clarity project:

• Clarity Angular/UI

Clarity version:

• v5.x

Framework:

• Angular

Framework version:

_ie: Angular 11

Device:

• Type: [MacBook]
• OS: [ iOS]
• Browser [chrome]
• Version [90]

[hippee-lee]

Have you tried using the async pipe in the template?

<clr-option *clrOptionItems="let state of states | async; field:'name'" [clrValue]="state">

Can you submit an isolated reproduction of your issue so we can take a look?
We keep starter apps here.

[becksky]

Have you tried using the async pipe in the template?

<clr-option *clrOptionItems="let state of states | async; field:'name'" [clrValue]="state">

Can you submit an isolated reproduction of your issue so we can take a look?
We keep starter apps here.

Here is the reproduction environment, I tried add the pipeline "async", but it doesn't work.

https://stackblitz.com/edit/clarity-combobox-testbed?file=src/app/app.component.html
https://clarity-combobox-testbed.stackblitz.io

[hippee-lee]

I did some research into this and it seems like ngOnInit isn't supported. See the conversation here: angular/angular#17420

While looking at your example I wondered if there is a reason you aren't using an observable here?

I think you can make async/await work with angular but it seems to be an awkward pattern to implement that I haven't seen before.

I'm going to convert this to a discussion since it's not an issue with one of the @clr/angular components.