Angular 8 template reference variable scope unclear

Question

I have given a name using the #var notation to an angular component (app-backtester-chart) created by me, but I don't understand why I don't seem to be able to reference it outside of the div it is in? I'm clearly missing something here...

  {{chartcmp.width}}
  <div class="row">
    <div class="col" *ngIf="thisStrategy">
      {{chartcmp.width}}
      <app-backtester-chart #chartcmp
                          [inputStrategy]="thisStrategy"
                          [showBenchmark]="showBenchmark">
      </app-backtester-chart>
    </div>
  </div>

The first {{chartcmp.width}} generates an error: Cannot read property 'width' of undefined

So why does the second one inside the div works, and correctly displays the width?

From the Angular documentation (Template reference variables):

You can refer to a template reference variable anywhere in the component's template.

I can't find an explanation anywhere. Any help would be greatly appreciated.

ColdFire · Accepted Answer · 2021-07-27 12:28:33Z

2

It's beacause of the *ngIf. You can't access a template reference variable if it's not rendred.

answered Jul 27, 2021 at 12:28

ColdFire

1,46115 silver badges16 bronze badges

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

Comments

Lud · Accepted Answer · 2020-10-09 02:04:47Z

1

I think it's because your *ngIf if you're doing an ngIf all div inside are not constructed as well as your variable ^^

answered Oct 9, 2020 at 2:04

Lud

2962 silver badges10 bronze badges

2 Comments

AlePorro Over a year ago

Ok, removing the *ngIf it works, so thanks for that, but I still don't get the rationale. If the condition of the *ngIf evaluates to "true" then what's inside it gets constructed, which is exactly what happens in my code. So why would the variable not exist outside of it? Is its scope limited by the existence of the *ngIf, like in C# for example what is inside the curly brackets defines a new scope? I can't find a clear answer anywhere.

ColdFire Over a year ago

stackoverflow.com/questions/45782524/…

Janitha Rasanga · Accepted Answer · 2020-10-09 03:01:13Z

0

Try this for first one

{{chartcmp === null? "" : chartcmp.width}}

answered Oct 9, 2020 at 3:01

Janitha Rasanga

1,1261 gold badge11 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular 8 template reference variable scope unclear

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related