自定义元素（聚合物）属性绑定到 RxJS 可在 Angular 中观察到 9

Question

I have an Angular 9 application where Angular Component properties binds to RxJS observables. Here I am trying to replace Angular Components with Polymer custom element (paper-input).

What is my observation? I am unable to bind custom element property with RxJS observables which I was able to with Angular Component properties.

How to reproduce? For showing what I am facing I have stackblitz sample with custom-element(paper-input) binds to an observable.

app.component.html

<paper-input [label]="price$ | async" ></paper-input>

app.component.ts

import { Observable } from 'rxjs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent  {
  price: Observable<string>;
  
  constructor() {
      this.price = Observable.of("230$");
  }
}

Full Code: https://stackblitz.com/edit/angular-examples-mu72vs

Expectation is I am able to bind the label property of paper-input (Polymer) to Observable and when ever there is a change gets reflected to custom element property. In actual I am not seeing the changes reflected to label property and it is empty.

Here I assumed the observable subscription will happen as part of AsyncPipe using while binding. But that is not happening with a custom element property.

What is the best way to achieve custom element property binding with RxJS Observables?

Regards Basanth

Answer 1

Now it is working, there was a minor mistake from my Angular code. Basically the way I declared and used the observable. We should have '$' sign used for indicating it as a observable variable.

ie with the below change it is working fine.

export class AppComponent  {
  price$: Observable<string>;
  
  constructor() {
      this.price$ = Observable.of("230$");
  }
}

I doubted aync pipe with CustomELement, but there is no problem using async pipe with Polymer Custom ELements.

You can find the working sample here @ https://stackblitz.com/edit/angular-examples-udy8qe

Thanks

Basanth