Observable in Angular returns [ Object object ]

Question

I am new to Angular. I saw similar questions here but still cant get the point. In my service i have:

banner(): Observable<String> {
    return this.http.get<String>(`${SERVER_API_URL}/api/banner`);
}

In component:

ngOnInit() {
    this.principal.identity().then(account => {
        this.account = account;
    });

    this.registerAuthenticationSuccess();
    this.craCoreService.banner().subscribe(value => this.banner = value);
}

And html:

<div class="alert alert-warning" *ngSwitchCase="false">
   {{banner}}
</div>

My service method returns simple JSON object with single String property called "banner". But in UI i always get [Object object]. I do not understand how to get value from it. Appreciate any help, thank you.

Answer 1

If it's an object with the banner property, then you need to use that use property in your TS code

this.craCoreService.banner().subscribe(value => this.banner = value.banner);