Dynamically created variable has no scope?

Question

So previously in Angular 1.X i've been used to creating local variables on the html-side.

It usually looks something like this (AngularJS):

<div class="parentContainer" ng-repeat="error in $ctrl.systemErrorMessages>
    <div ng-click="showHide=(showHide ? false : true)">
                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        Click me to toggle all selectors in the same hierarchical-level (scope) as me.
    </div>

    <div ng-if="showHide"> {{error.message}} </div>
</div>

The code above will create the variable and show the div inside.

However, if I in Angular 1.X put this within a ng-repeat tag, that variable would be local to its scope. Lets say there are 50 entries in systemErrMessages, when i now click the toggle-div, all 50 entries are reacting... it used to be so that - only the message whos toggle-div i clicked; reacted...

It seems that Angular2 breaks the scope of ngFor's, and affects ALL elements.

What i'm trying in (Angular 2):

<div *ngFor="let error of systemErrMessages">
     <div class="item" [hidden]="showHide">
        ErrorMessage: {{error}}
     </div>
     <div (click)="showHide=(showHide ? false : true)">TOGGLE above</div>
                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
</div>

To clarify (TL;DR):

HTML-structure (what the ngFor has generated):

<div class="parentContainer">
    <div class="item">
        <div class="information" [hidden]="showHide">lorem ipsum</div>
        <div (click)="showHide=(showHide ? false : true)">TOGGLE</div>
    </div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

When i click TOGGLE in angular2, ALL elements are visible.

In AngularJS only that .item's .information is visible.

Is it possible to get the same behaviour as in 1.X ?

Answer 1

Angular^7.x.x

If you want to create dynamic variable in template then just create it:

<div *ngFor="let error of systemErrMessages; let showHide = 'showHide'">
                                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^
     <div class="item" [hidden]="showHide">
        ErrorMessage: {{error}}
     </div>
     <div (click)="showHide = !showHide">TOGGLE above</div>
</div>

otherwise your showHide variable will have component scope.

Answer 2

It seems that Angular2 breaks the scope of ngFor's, and affects ALL elements.

Everything is component based, there is no Scope (global, implicit, or otherwise) like there was in angularjs. When referencing instances in your html they are assumed to be rooted in the component to which the template is associated with.

Is it possible to get the same behavior as in 1.X ?

No. You have to explicitly define where state (in this case) is tracked as scope is not a thing anymore in angular2+.

With the code you posted the easiest way to change it to be "angular2+ compliant" would be to track the visibility on the item in the array. In this case expand the string array to be an array of an object containing the string and if it should be visible or not.

See stackblitz

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  systemErrMessages: {error: string, hidden: boolean}[];

  ngOnInit(){
    // ['one','two','three'] could be any source
    this.systemErrMessages = ['one','two','three'].map(_ => {
      return {error: _, hidden: true};
    });

    this.systemErrMessages.push({error: 'any other error', hidden: false});
  }
}

app.component.html

<div *ngFor="let error of systemErrMessages">
     <div class="item" [hidden]="error.hidden">
        ErrorMessage: {{error.error}}
     </div>
     <button (click)="error.hidden = !error.hidden">Toggle</button>
</div>

Answer 3

Joel, in Angular the variable is created dinamically too, but it's always the same. Is like you declare in your .ts the variable showHide. As is the same variable affects all the divs. The solution is have severals variables -one for each div-

If you iterate over an array of object, as Igor say you, simply can be

<button (click)="error.hidden = !error.hidden">Toggle</button>

If you iterate over an array of strings, you need declare an array of checks, and use the index. that's

<!--take a look to ";let i=index"-->
<div *ngFor="let error of systemErrMessages;let i=index">
     <div (click)="showHide[i]=(showHide[i] ? false : true)">TOGGLE above</div>
</div>

//And in your .ts don't forget declare
showHide:boolean[]=[]