Is it possible to use the same template reference variable for different elements?

Question

Consider this case, where the two different divs never exist at the same time:

<!-- Mutually exclusive containers -->

<ng-container *ngIf="predicate">
  <div #myRef>
    ...
  </div>
</ng-container>

<ng-container *ngIf="!predicate">
  <div #myRef>
    ...
  </div>
</ng-container>

And, in my component:

@ViewChild('myRef', {read: ElementRef}) private myRef: ElementRef;

// do something with myRef...

Yes, it is possible. You can even use the same variable for elements that are present at the same time, as shown in this answer. — Martin Parenteau
– Martin Parenteau, Commented Sep 4, 2018 at 13:25
Sure I tried it. I was wondering whether it was advised against. Sorry, I should have specified. — Daniele Repici
– Daniele Repici, Commented Sep 5, 2018 at 8:04
another use case would be to have n no. of elements with same template ref variable and access them in your component class like this @ViewChildren('myRef', {read: ElementRef}) allMyRefs: QueryList<ElementRef>; — adnan2nd
– adnan2nd, Commented Nov 27, 2019 at 8:33

moh · Accepted Answer · 2018-09-04 16:58:29Z

2

Yes you can have. Even if you have 2 same template ref in your template, if you try to fetch using @ViewChild then you will get the first ref.

<ng-container >
  <div #myRef>
  <p> this is the first content, </p>
    </div>
</ng-container >


<ng-container >
    <div #myRef>

  <p> this is  the Seoncd content, </p>
    </div>
</ng-container >

 @ViewChild('myRef') myRef;

  ngAfterViewInit(): void {
    console.log(this.myRef.nativeElement);
  }

answered Sep 4, 2018 at 16:58

moh

1,5262 gold badges17 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it possible to use the same template reference variable for different elements?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related