Html Question posted in
Some basic documentation can be found here.

Html – Not able to replace the old div with specific div using angular

I have few small divs having background color like red,yellow,pink etc which are coming from loop.On click of corresponding div a big div should show with same color which is working fine.But my requirement is suppose if I click on red(small div) a big red div should appear again when I click yellow(small div) an yellow big div should appear on earlier div on replacing it.Now it is not replacing it is creating new div and toogle is happening.

app.component.html

<div *ngFor="let color of colors" class="color-div" [ngClass]="color" (click)="toggleBigDiv(color)">
    {{color}}
    <div class="big-div" *ngIf="shownDivs[color]" [ngClass]="color">
      Big {{color}} Div
    </div>
  </div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  colors = ['red','yellow','pink','green'];
shownDivs:{ [key:string]:boolean } = {};
  title = 'project';
toggleBigDiv(color:string){
  this.shownDivs[color] = !this.shownDivs[color];
}

app.component.css

.red{
    background-color: red;
}
.yellow{
    background-color: yellow;
}
.pink{
    background-color: pink;
}
.green{
    background-color: green;
}
.big-div{
    position: absolute;
    left : 110px;
    width:300px;
    height:300px;
   
}
Tags:

3

Answers


  1. 0

    The best solution is to move the div outside the loop to prevent elements being created. Then on click, we can get the position of the click using event then set the top and left position.

    import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [
    `
    :host {
      position: relative;
      display:block;
    }
  .red{
    background-color: red;
}
.yellow{
    background-color: yellow;
}
.pink{
    background-color: pink;
}
.green{
    background-color: green;
}
.big-div{
    position: absolute;
    width:300px;
    height:300px;
   
}
`,
  ],
  template: `
    <div *ngFor="let color of colors" class="color-div" [ngClass]="color" (click)="toggleBigDiv($event, color)">
      {{color}}
    </div>
      <div class="big-div" *ngIf="color" [ngClass]="color" [style.top.px]="y" [style.left.px]="x">
        Big {{color}} Div
      </div>
  `,
})
export class App {
  colors = ['red', 'yellow', 'pink', 'green'];
  color: string = '';
  x = 0;
  y = 0;
  title = 'project';
  toggleBigDiv(event: any, color: string) {
    debugger;
    this.color = color;
    const { top, left } = event.target.getBoundingClientRect();
    this.x = event.pageX;
    this.y = event.pageY;
  }
}

bootstrapApplication(App);

    Stackbltiz Demo

    You can reset the object to blank, when a new click event occours. This will involve no HTML changes.

    import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [
    `
  .red{
    background-color: red;
}
.yellow{
    background-color: yellow;
}
.pink{
    background-color: pink;
}
.green{
    background-color: green;
}
.big-div{
    position: absolute;
    left : 110px;
    width:300px;
    height:300px;
   
}
`,
  ],
  template: `
    <div *ngFor="let color of colors" class="color-div" [ngClass]="color" (click)="toggleBigDiv(color)">
      {{color}}
      <div class="big-div" *ngIf="shownDivs[color]" [ngClass]="color">
        Big {{color}} Div
      </div>
    </div>
  `,
})
export class App {
  colors = ['red', 'yellow', 'pink', 'green'];
  shownDivs: { [key: string]: boolean } = {};
  title = 'project';
  toggleBigDiv(color: string) {
    this.shownDivs = {}; // <- changed here!
    this.shownDivs[color] = !this.shownDivs[color];
  }
}

bootstrapApplication(App);

    Stackblitz Demo

    Login or Signup to reply.
  2. 0

    I guess next one will help:

    //.ts
export class AppComponent implements OnInit {
    colors = ['red','yellow','pink','green'];
    activeColor = '';
    
    setActiveColor(color: string){
        this.activeColor = color;
    }
}


//.html
<div *ngFor="let color of colors" class="color-div" [ngClass]="activeColor" (click)="setActiveColor(color)">
        {{ activeColor }}
        <div class="big-div" *ngIf="shownDivs[color]" [ngClass]="activeColor">
            Big {{color}} Div
        </div>
</div>
    Login or Signup to reply.
  3. 0

    you can move the big div out side the loop and have a new variable indicate the current color

     @Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div *ngFor="let color of colors" class="color-div" [ngClass]="color" (click)="toggleBigDiv(color)">
      {{color}}
      
    </div>
    <div class="big-div" *ngIf="shownDivs[currentColor ]" [ngClass]="currentColor ">
        Big {{currentColor }} Div
      </div>
  `,
})
export class App {
  name = 'Angular';
  colors = ['red', 'yellow', 'pink', 'green'];
  shownDivs: { [key: string]: boolean } = {};
  currentColor = '';
  title = 'project';
  toggleBigDiv(color: string) {
    this.shownDivs[color] = !this.shownDivs[color];
    this.currentColor = color;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search