While implementing ngrx Observable is showing Object of unknown type

Question

This is my component's typescript code:

import { Component, Input, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-counter-output',
    templateUrl: './counter-output.component.html',
    styleUrls: ['./counter-output.component.css']
})
export class CounterOutputComponent implements OnInit {
    counter!: number;
    counter$!: any;

    constructor(private store: Store<{ counter: { counter: number } }>) {
    }

    ngOnInit(): void {

        this.store.select('counter').subscribe((data) => {
            this.counter = data.counter;
            console.log(data);
        });
        this.counter$ = this.store.select('counter');
        console.log(this.counter$);
    }
}

This is its HTML template:

<div>This is the counter:{{(counter$|async).counter}}</div>
<div>This is the counter:{{counter}}</div>

There is an error in line no 1 in the HTML file.

When I am subscribing in the typescript file I am able to get the value, but when I am using it as an observable it is showing an error.

Answer 1

Set a type to counter$.

export interface Counter {
    counter: number;
}

....

counter$: Observable<Counter>;

Of course, you have to be sure that the selector returns Counter as data.

EDIT: If you insist to use any (which beats the purpose of using Typescript), you can use the $any() type cast function to suppress this error.

<div>This is the counter:{{ ($any(counter$|async)).counter }}</div>

Answer 2

Have you tried to actually define your counter$ property as an Observable?

Why declare it as any if you already know what type of data is?

export interface myInterfaceData {
   counter: number;
}

counter$!: Observable<myInterfaceData>;

<ng-container *ngIf="{ myCounter: counter$ | async } as observable">
  <div>
    This is the counter: {{ observable.myCounter?.counter }}
  </div>
</ng-container>