Search code examples
javascriptangularangular2-templateangular2-directives

Variable is distributed among same components

enter image description hereenter image description hereI create a topic component by iterating over topics variable in meeting-edit Component.

 <app-topic *ngFor="let topic of topics"
               [topic]="topic"
    >
    </app-topic>

The TS code of Topic Component :

  @Input('topic') topic: Topic;
  show = false;
  constructor() { }
  ngOnInit() {
  }

and Template :

<div class="topic">
  <p  style="padding: 10px 0">{{topic.name}}</p>
  <label for="upload-photo" style="cursor: pointer">Fayl</label>
  <input type="file" class="inputFile" id="upload-photo" (click)="this.show = !this.show" >
  <div #content style="height: 200px;width: 200px " *ngIf="show"></div>
</div>

As you see by default show variable is false. When input element is clicked ,it should toggle show variable which would display #content div. But when clicking the input element of each component strange behavior occurs. Only the the variable show of first topic component is toggled. It is like every topic component uses same variable. Why that happens? please help to solve this. it seems a bug.

Solution

  • Solved this issue. It was because of input file type element. I just moved (click)="this.show = !this.show" to label element and it is resolved. Strange but it worked. I think it is a bug of Angular.