Property 'childCom1' does not exist on type 'parentCom' in case of trigger fonction when Com1 and Com2 are siblings

Question

I want to trigger a function of childCom1 from childCom2. childCom1and childCom2 are siblings. To do so I used this: How to call another components function in angular2 (first answer).

But in my parent component HTML, the childCom2 doesn't recognize childCom1 (seen by my IDE). And I got the following error at compilation: Property 'childCom1' does not exist on type 'parentCom'

I got the following code

parentCom

<div class="row">
  <div class="col-2">
    <app-childCom2 (myEvent)="childCom1.function()">
    </app-childCom2>
  </div>

  <div class="col-5">
    <div class="card">
      <div class="card-header">
        Data Frame
      </div>
      <div class="card-body" *ngIf="this.jsonParametersService.isSpecificationFileLoaded">
        <app-childCom1 #childCom1></app-childCom1>
      </div>
    </div>
  </div>
</div>

childCom2

@Component({
  selector: 'app-childCom2',
  templateUrl: './childCom2.component.html',
  styleUrls: ['./childCom2.component.css']
})
export class childCom2 implements OnInit {
  opened = true;
  @Output() myEvent = new EventEmitter();

  constructor() { }

  ngOnInit(): void {
  }

  function($event) {
    this.myEvent.emit($event);
  }
}

Answer 1

This was caused by the *ngIf. I removed the *ngIf field and wrote it into the particular component.