Ng-container not showing when clicking button

Question

This is my portion of html code:

    <div>
      <button
        type="button"
        class="add-emp-btn"
        *ngIf="!addEmployeeBtnClicked"
        (click)="onEmpBtnClicked()"
        [disabled]="newProjectForm.invalid"
      >
        Add Employees
      </button>
      <ng-container *ngIf="addEmployeeBtnClicked" formArrayName="employees">
        <div *ngFor="let employeesControl of getControls(); let i = index">
          <label for="userName">Insert one or multiple Users Names to submit</label>
          <input type="text" [formControlName]="i"/>
          <div class="width-divider"></div>
          <button type="button" class="goto-add-emp-btn">Cancel</button>
        </div>
      </ng-container>
    </div>

The button clicked logic works because if i put the *ngIf in the div where the *ngFor now is, the button is hidden and the other 3 elements are shown. But of course i need the *ngFor there, that's why i wrapped everything with ng-container. I did this already few lines of code above and worked in that case. I must be missing something trivial.

Tl;dr: when Add Employees button is clicked, it should disappear and the ng container with the lable, input text and Cancel button, should appear

Answer 1

I copied this code, changed a few things because I don't have your surround code and it works. Things to check:

• In the onEmpBtnClicked() method, are you setting addEmployeeBtnClicked to true?
• Have you done an F12 to check the developer console to see if there is some error preventing display?
• What is getControls() providing? Is there data to display?