title: Angular 6- Dynamically change css properties for *ngFor elements on variable change of same component
body: <p>please see below image. I have list of p tags on canvas. Just below canvas, I have number of colours and font sizes. </p>
  
  <p><a href="https://i.stack.imgur.com/DY8y3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DY8y3.png" alt="enter image description here"></a></p>
  
  <p>Below is my scenario</p>
  
  <ol>
  <li>Add text over canvas. I can add as many as I want.</li>
  <li>Select any text and change colour and font size for selected p tag.</li>
  </ol>
  
  <p>Currently I did below code:</p>
  
  <p><strong>1. HTML</strong></p>
  
  <pre><code>&lt;ion-row #canvasRow id="canvasRow"&gt;
      &lt;ion-col *ngFor="let textarea of textAreasList; let textarea_index= index"&gt;
          &lt;p absolute-drag style="border: 1px dotted black;
              height: 40px;
              width: 60%;
              z-index: 10000;" (click)="changeTextStyle($event)" (txtCChange)="changeTxtColor($event)"
              (txtSChange)="changeTxtSize($event)"&gt;{{textarea}}&lt;/p&gt;
              &lt;button (click)="removeTextArea(textarea_index)"&gt;Remove&lt;/button&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
  </code></pre>
  
  <p><strong>2. Color code selection</strong></p>
  
  <pre><code>&lt;ion-row id="top-toolbar"&gt;
      &lt;ion-col&gt;
          &lt;ion-scroll scrollX="true"&gt;
              &lt;ion-buttons id="ionBtnGroup"&gt;
                  &lt;button *ngFor="let colour of availableColours" icon-only ion-button (click)="changeColour(colour)"&gt;
                      &lt;ion-icon [style.color]="colour" name="brush"&gt;&lt;/ion-icon&gt;
                  &lt;/button&gt;
              &lt;/ion-buttons&gt;
          &lt;/ion-scroll&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
  </code></pre>
  
  <p><strong>3. Font change code</strong></p>
  
  <pre><code>&lt;ion-buttons right *ngIf="!isDraw &amp;&amp; !isRotate" &gt;
          &lt;button color="dark" ion-button icon-only (click)="changeFontSize(10)"&gt;&lt;div class="galeria"&gt;&lt;span&gt;10px&lt;/span&gt;&lt;/div&gt;&lt;/button&gt;
          &lt;button color="dark" ion-button icon-only (click)="changeFontSize(15)"&gt;&lt;div class="galeria"&gt;&lt;span&gt;15px&lt;/span&gt;&lt;/div&gt;&lt;/button&gt;
          &lt;button color="dark" ion-button icon-only (click)="changeFontSize(20)"&gt;&lt;div class="galeria"&gt;&lt;span&gt;20px&lt;/span&gt;&lt;/div&gt;&lt;/button&gt;
          &lt;button color="dark" ion-button icon-only (click)="changeFontSize(30)"&gt;&lt;div class="galeria"&gt;&lt;span&gt;30px&lt;/span&gt;&lt;/div&gt;&lt;/button&gt;
          &lt;button color="dark" ion-button icon-only (click)="changeFontSize(50)"&gt;&lt;div class="galeria"&gt;&lt;span&gt;50px&lt;/span&gt;&lt;/div&gt;&lt;/button&gt;
      &lt;/ion-buttons&gt;
  </code></pre>
  
  <p><strong>4. Font change function</strong></p>
  
  <pre><code>changeFontSize(size){
    this.selectedFontSize = size+'px';
    this.txtSChange.emit({size: size+'px'});
  }
  </code></pre>
  
  <p><strong>5. Colour change function</strong></p>
  
  <pre><code> changeColour(colour){
      if(this.isDraw){
        this.currentColour = colour;
      }else{
        this.selectedColor = colour;
        this.txtCChange.emit({color: colour});
      }
  }
  </code></pre>
  
  <p><strong>6. Colour and font size applicable code</strong></p>
  
  <pre><code>@Output() txtCChange = new EventEmitter();
  @Output() txtSChange = new EventEmitter();
  
  changeTextStyle(event: Event){
      let element = event.target as HTMLInputElement;
      element.style.color = this.selectedColor;
      element.style.fontSize = this.selectedFontSize;
    }
  
    changeTxtColor(event){
      this.selectedColor = event.color;
      this.changeTextStyle(event);
    }
  
    changeTxtSize(event){
      this.selectedFontSize = event.size;
      this.changeTextStyle(event);
    }
  </code></pre>
  
  <p>Do let me know if have any confusion. Above code is not working. I want to know more efficient way.</p>