<div id="editPreamblesInput" #editPreamblesInput (mouseenter)="userEditable && isUrl? displayPreamblesLink.show() : null" (mouseleave)="displayPreamblesLink.hide()">
        <input-validation>
          <igx-input-group>
            <input igxInput name="preamblesRef" id="preamblesRef" type="text" formControlName="preamblesRef" [readonly]="!userEditable"
            inputValidationDirective [control]="libraryForm.controls['preamblesRef']"/>
            <label igxLabel for="preamblesRef">Preambles Reference</label>
          </igx-input-group>
        </input-validation>

      <igx-action-strip #displayPreamblesLink [displayDensity]="displayDensity" class="action-strip" [hidden]="true">
          <igx-buttongroup [multiSelection]="true" class="buttons">
              <button igxButton type="button" (click)="editPreamblesRef()">
                  <igx-icon>link</igx-icon>
              </button>
          </igx-buttongroup>
      </igx-action-strip>
      </div>

I'm not sure why this is null and what I am missing?

  <div id="editPreamblesInput" #editPreamblesInput (mouseenter)="userEditable && isUrl? displayPreamblesLink.show() : null" (mouseleave)="displayPreamblesLink.hide()">
    <input-validation>
      <igx-input-group>
        <input igxInput name="preamblesRef" id="preamblesRef" type="text" formControlName="preamblesRef" [readonly]="!userEditable"
        inputValidationDirective [control]="libraryForm.controls['preamblesRef']"/>
        <label igxLabel for="preamblesRef">Preambles Reference</label>
      </igx-input-group>
    </input-validation>

  <igx-action-strip #displayPreamblesLink [displayDensity]="displayDensity" class="action-strip" [hidden]="true">
      <igx-buttongroup [multiSelection]="true" class="buttons">
          <button igxButton type="button" (click)="editPreamblesRef()">
              <igx-icon>link</igx-icon>
          </button>
      </igx-buttongroup>
  </igx-action-strip>
  </div>

I'm not sure why this is null and what I am missing?

Edit:

So I've figured out why this is happening. The div is a part of a form which only shows if a boolean called loaded is set to true:

this gets set to true in a method called getData():

  getData() {
    this.libraryService.getAll().subscribe({
      next: (libraries) => {
        this.libraryList = libraries;

        if(this.route.snapshot.params['libraryId']) {
          const library = this.libraryList.find(l => l.id == this.route.snapshot.params['libraryId']);
          this.patchLibrary(library);
        } else {
          this.patchLibrary(this.getNewLibrary());
        }
        this.loaded = true;
      },
      error: (err) => {
        this.alertService.error(`Error getting ${this.alertVariable} data - ${err.message}`);
      }
    });
  }

this is then called in the ngOnInit method. loaded has a default value of false, if I change this to true I can then access that element. So I thought I could do something like:

  complete:() => {
    const test = document.getElementById("editPreamblesInput");
    console.log(test);

however test comes up as null. So I'm thinking I need to find a way so that I tell it to wait until the boolean is true before it tries to access it but not sure how