angular template ngif not work before reload page

Issue

I'm facing a strange problem. I'm using angular 12 and after rendering, the page doesnt show the ngIF template. the input only loads after I reload the page

...imports

@Component 
...
export class VideoUploadComponent implements OnInit { 
 ... 
variables
...
  isFile: boolean= true;
 
  constructor(
   ...
  ) {
    
    this.isFile = true;
  }

  ngOnInit() {

  }

...
Component functions
...

  
  onRadioboxChange(event: any) {
    this.isFile = !this.isFile;
    console.log(this.isFile);
  }

  
}

here is the html

  <form
    ...
  >
   ...
          
          <input
           ...
            (change)="onRadioboxChange($event)"
          />
          <label class="btn btn-outline-primary" for="url">Endereço</label>
        </div>

        <div class="mb-3 mx-auto">
          <div *ngIf="isFile; else endereco">
            ...
              />
            </div>
          </div>
        </div>

        <ng-template #endereco>
           ...
          </div>
        </ng-template>
      </div>
      <div class="form-item">
      ...
  </form>
</div>

before reload

after reload the page

can someone help me with this issue?emphasized text

Solution

problem solved.

the *ngIf was not showing the content becouse i was not using routerLink for navigate to the page

before

<li>
 <a class="dropdown-item nav-item" href="#/upload"**>
  Cadastrar</a>
 </li>

Solution:

<li>
<a class="dropdown-item nav-item" [routerLink]="['/upload']">
Cadastrar</a>
 </li>

Answered By - tecnocrata