Angular component doesn't assign value from observable service getter, why?

Question

I'm working on building a set of filters, so I'm just trying to make use of the salesChannels array content in my view, which only gets populated when clicking the button with the test() function. The log in ngOnInit outputs an empty array the first time, but works correctly after pressing the button. The getOrganisationChannels returns an observable.

What causes this behavior and how do I handle it properly? I tried using an eventEmitter to try and trigger the populating but that doesn't work.

TYPESCRIPT

export class SalesChannelFilterComponent implements OnInit {

    constructor(
        public organizationService: OrganizationService
    ) { }

    @Input() organizationId: any;

    salesChannels: Array<any> = [];
    selectedChannels: Array<any> = [];
    allSelected: Array<any> = [];

    ngOnInit() {
        this.getChannels();
        console.log(this.salesChannels);
    }

    getChannels() {
        this.organizationService.getOrganizationChannels(this.organizationId).subscribe(
            salesChannels => {
                this.salesChannels = salesChannels;
            })
    }

    test() {
        console.log(this.salesChannels);
    }
}

HTML

<div>
    {{ salesChannels | json }}
</div>

<button (click)="test()">test</button>

<div *ngFor="let channel of salesChannels; let i = index;" class="checkbox c-checkbox">
    <label>
        <input type="checkbox">
        <span class="fa fa-check"></span>{{channel.name}}
    </label>
</div>

Answer 1

This is expected behaviour since you are populating the salesChannel in the subscription of an Observable. It's recommended that you use aysnc pipe to let angular check for changes and update the view accordingly.

Component.ts :

export class SalesChannelFilterComponent implements OnInit {

    constructor(
        public organizationService: OrganizationService
    ) { }

    @Input() organizationId: any;

    salesChannels$!: Observable<Array<any>>;
    selectedChannels: Array<any> = [];
    allSelected: Array<any> = [];

    ngOnInit() {
        this.getChannels();
        console.log(this.salesChannels);
    }

    getChannels() {
      this.salesChannels$ = this.this.organizationService.getOrganizationChannels(this.organizationId);

    }

    test() {
        console.log(this.salesChannels);
    }
}

In your template:

<button (click)="test()">test</button>

<div *ngFor="let channel of salesChannels$ | async; let i = index;" class="checkbox c-checkbox">
    <label>
        <input type="checkbox">
        <span class="fa fa-check"></span>{{channel.name}}
    </label>
</div>

More details: https://angular.io/api/common/AsyncPipe

Answer 2

I recommend using AsyncPipe here: <div>{{ salesChannels | async}}</div> and in .ts: salesChannels = this.organizationService.getOrganizationChannels(this.organizationId)