Angular 6- Dynamically change css properties for *ngFor elements on variable change of same component

Question

please see below image. I have list of p tags on canvas. Just below canvas, I have number of colours and font sizes.

Below is my scenario

1. Add text over canvas. I can add as many as I want.
2. Select any text and change colour and font size for selected p tag.

Currently I did below code:

1. HTML

<ion-row #canvasRow id="canvasRow">
    <ion-col *ngFor="let textarea of textAreasList; let textarea_index= index">
        <p absolute-drag style="border: 1px dotted black;
            height: 40px;
            width: 60%;
            z-index: 10000;" (click)="changeTextStyle($event)" (txtCChange)="changeTxtColor($event)"
            (txtSChange)="changeTxtSize($event)">{{textarea}}</p>
            <button (click)="removeTextArea(textarea_index)">Remove</button>
    </ion-col>
  </ion-row>

2. Color code selection

<ion-row id="top-toolbar">
    <ion-col>
        <ion-scroll scrollX="true">
            <ion-buttons id="ionBtnGroup">
                <button *ngFor="let colour of availableColours" icon-only ion-button (click)="changeColour(colour)">
                    <ion-icon [style.color]="colour" name="brush"></ion-icon>
                </button>
            </ion-buttons>
        </ion-scroll>
    </ion-col>
  </ion-row>

3. Font change code

<ion-buttons right *ngIf="!isDraw && !isRotate" >
        <button color="dark" ion-button icon-only (click)="changeFontSize(10)"><div class="galeria"><span>10px</span></div></button>
        <button color="dark" ion-button icon-only (click)="changeFontSize(15)"><div class="galeria"><span>15px</span></div></button>
        <button color="dark" ion-button icon-only (click)="changeFontSize(20)"><div class="galeria"><span>20px</span></div></button>
        <button color="dark" ion-button icon-only (click)="changeFontSize(30)"><div class="galeria"><span>30px</span></div></button>
        <button color="dark" ion-button icon-only (click)="changeFontSize(50)"><div class="galeria"><span>50px</span></div></button>
    </ion-buttons>

4. Font change function

changeFontSize(size){
  this.selectedFontSize = size+'px';
  this.txtSChange.emit({size: size+'px'});
}

5. Colour change function

 changeColour(colour){
    if(this.isDraw){
      this.currentColour = colour;
    }else{
      this.selectedColor = colour;
      this.txtCChange.emit({color: colour});
    }
}

6. Colour and font size applicable 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);
  }

Do let me know if have any confusion. Above code is not working. I want to know more efficient way.

Answer 1

I would suggest utilising ngStyle inside your *ngFor loop to take care of all the DOM manipulation for styling. It's considered a no-go to directly manipulate DOM elements inside angular. This allows you to get rid of a lot of manipulation code.

Every element inside textAreasList should be an object containing all necessary properties (like the actual text content) and the styling attributes like position, color, size, etc. Example: { content: "Ravi1", style: {height: 40, width: 60, color: "#ff0000"} }

Depending on whether the user first selects the color and in a second click selects the text or the other way round, you may store the selected color (or the selected text element) in your controller to reference it, once the text is clicked (the color is clicked).

Template:

<button *ngFor="let colour of availableColours" icon-only ion-button (click)="selectedColour = colour)">
   <ion-icon [style.color]="colour" name="brush"></ion-icon>
</button>


<p  [...] (click)="applyStyles(textarea)">{{textarea.content}}</p>

Controller:

applyStyles(textarea){
  textarea.styles.colour = this.selectedColor;
}