Angular Typescript and HTML

Question

I have an interface that looks like this:

export interface GeneralInfo{
    Name: string;
    Description: string;
}

Later in a component class, I have the following code

export class SignalsComponent implements OnInit {
    objGeneral: GeneralInfo;

constructor(private _apiService: APIService)

openPopUp(){
    this._apiService.getJsonData().subscribe(
            (res => {                
                var tempJson = JSON.parse(res);
                this.objGeneral = tempJson.General as GeneralInfo;
                console.log("json --->", this.objGeneral.Description);
            }),
            (err => { })
        );

}
}

When I look at the browser console all works and I see the data I expect to see. However, when I try to invoke the objGeneral.Description property in HTML, it fails. This is my HTML:

<div class="col-lg-6 col-md-6">
   {{objGeneral.Description}}
</div>

What am I doing wrong?

Thank you

Probably the HTML is rendering before the data is retrieved from the server. You need to use the objGeneral.Description only inside the callback function or in a place where you are sure the callback has already been called. I'd recommend to leave the HTML empty and change its content after the console.log() — Daniel Cruz
– Daniel Cruz, Commented Oct 30, 2022 at 23:28

esouyeaux · Accepted Answer · 2022-10-31 10:28:00Z

1) Quick answer

Add a condition to your div :

<div class="col-lg-6 col-md-6" *ngIf="objGeneral">
   {{objGeneral.Description}}
</div>

Or use optional chaining if you still want to render an empty div :

<div class="col-lg-6 col-md-6">
    {{objGeneral?.Description}}
</div>

Note that you can use optional chaining in condition :

<div class="col-lg-6 col-md-6" *ngIf="objGeneral?.Description">

2) Complete answer

objGeneral is still not defined when your DOM is rendering, it will be defined when the Observable completes. Means you are asking the DOM to render undefined data.

When I look at the browser console all works

Weird, because you should have this type of error in your console which prevents you to call the property of an undefined object :

ERROR TypeError: Cannot read properties of undefined (reading 'Description')

3) Ressources & useful links you might want to check for more information https://javascript.plainenglish.io/the-beauty-of-optional-chaining-in-typescript-32dd58ce1380

Lonli-Lokli · Accepted Answer · 2022-10-31 10:42:27Z

1

The way you do it is incorrect - objGeneral exists only after async API call. Instead you should deliver this property via async pipe

export class SignalsComponent implements OnInit {
    objGeneral$: BehavioutSubject<GeneralInfo> | null;

constructor(private _apiService: APIService)

openPopUp(){
    this.objGeneral$ = this._apiService.getJsonData().pipe(
      map(res => JSON.parse(res).General as GeneralInfo)
    );
}
}

and use it as

<div class="col-lg-6 col-md-6" *ngIf="objGeneral$ | async as objGeneral">
    {{objGeneral.Description}}
</div>

answered Oct 31, 2022 at 10:42

Lonli-Lokli

3,8161 gold badge32 silver badges42 bronze badges

Collectives™ on Stack Overflow

Angular Typescript and HTML

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related