how to check ng-if after change event

Question

I am using Angular 6 in my project.

I have a div element having *ng-if="edited" as below

<div *ngIf="edited">
    {{langText}}
</div>

on first load edited will be false and it won't be visible. But, I have a chance event like below,

<select (change)="getSelectedLang(i,$event.target.value)">
                <option value="0">Language</option>{{languages[0].Lang}}
                <option *ngFor="let selecLanguage of languages[0].Lang" value={{selecLanguage}}>
                    {{selecLanguage}}
                </option>
            </select>

Once I select any language from the drop-down, it will call a function where I have a web service API bound and getting the following result in JSON and I am making edited = true.

getSelectedLang(id,langName){
        this.edited = true;
        this.custService.getSelectedLanguageData(id,langName).subscribe((data:  Array<object>) => {
        this.langtext = data;
        this.langtext = JSON.stringify(this.langtext.comicPageTextLites);
        console.log(this.langtext);
        this.langtext = JSON.parse(this.langtext);
        console.log( "=====this.langtext=====" );
        console.log( this.langtext );
            $(".show_me").toggle();
            $(".show_me").show();
        });
    }

[{"pageNo":1,"text":"हैलो नासीर, आप कैसे हैं","x":"679","y":"689"},{"pageNo":2,"text":"मैं अच्छा हूँ","x":"568","y":"890"}]

Now, I need to show the div *ngIf="edited" in the UI. But, it's not displaying.

Please suggest me how can I achieve this. Every time I change the language from the drop down the result will change and I should show the data in UI.

Answer 1

For me the problem is not about the "edited" variable, the *ngIf must work.

The name of the langtext variable if badly write in the html. You use langtext in the component en write "langText" in the html.