Cannot get several nested ngif statements to work as expected

I am trying to execute several nested ngIf statements. The idea is something like:

if (error1){
   print "We cannot find your information on Platform 1"
}
else{
   print name1
   print id1
   if(error2){
      print "We cannot find your information on Platform 2"
   }
   else{
      print name2
      print id2
      if(error3){
          print "We cannot find your information on Platform 3"
       }
       else{
          print name3
          print id3
}}}

I am able to get the first ngif to work properly by displaying either the error or the information, but once I tried to incorporate the other ngIf statments nothing would display.

my html looks something like this:

<!DOCTYPE html>
<br>
<div>
    <h2>User {{ourUser}}</h2>
</div>

<h3>Platform 1</h3>
<div *ngIf="error1; else noError1">

    <body>We cannot find your information on Platform 1</body>

    <ng-template #noError1>

        <body>
            Name: {{finalData[0].name}}
            <br> ID: {{finalData[0].userID}}
        </body>

        <div *ngIf="error2; else noError2">

            <body>We cannot find your information on Platform 2</body>

            <h3>Platform 2</h3>
            <ng-template #noError2>

                <body>
                    Name: {{finalData[1].name}}
                    <br> ID: {{finalData[1].userID}}
                </body>
                <h3>Platform 4</h3>
                <div *ngIf="error3; else noError3">

                    <body>We cannot find your information on Platform 3</body>

                    <ng-template #noError3>

                        <body>
                            Name: {{finalData[2].name}}
                            <br> ID: {{finalData[2].userID}}
                        </body>
                    </ng-template>
                </div>
            </ng-template>
        </div>
    </ng-template>
</div>

I think I have all tags closed properly unless I am missing something.

Like I said before I can get the first statement to work on its own, but when I incorporate the others No data shows. All that shows is

User

Platform 1
Name: 
ID:

Solution

The problem comes from the nesting of the *ngIf -s, so if you change your structure in as in the example below it will work.

<h3>Platform 1</h3>
<div *ngIf="error1; else noError1">
    <body>We cannot find your information on Platform 1</body>
</div>

<ng-template #noError1>

<body>
Name: here is the name
  <br> 
ID: here is the id
</body>
        <div *ngIf="error2; else noError2">
            <body>We cannot find your information on Platform 2</body>
            <h3>Platform 2</h3>
        </div>
</ng-template>

<ng-template #noError2>
 <body>
   Name: second name
   <br> 
   ID: second id
 </body>
   <h3>Platform 4</h3>
   <div *ngIf="error3; else noError3">
       <body>We cannot find your information on Platform 3</body>
   </div>
</ng-template>
<ng-template #noError3>
  <body>
    Name: third name
    <br> 
    ID: third id
  </body>
</ng-template>

StackBlitz

Note

As mentioned in the comments, you should probably use different HTML structure, that doesn't look that messy.