For my project, I am working on a specific scenario:
When the user clicks on the "Animals" tile, it should expand while the other tiles replace it. Similarly, clicking on the "Plants" tile should expand it and reorder the other tiles.
===========1st View:============
https://i.sstatic.net/JvzEt.png
===========2nd View============== https://i.sstatic.net/WiY4f.png
The first page displays the tile view.
The second page displays the expanded div when a tile is clicked.
I need assistance in achieving this functionality. Below is a snippet of my code. I am able to show/hide the expanded tile, but I am struggling with hiding the clicked tile and reordering the other tiles. Any suggestions on how to accomplish this? I do not require expanding or contracting animations.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 6';
showDiv:boolean = false;
showDetails():void{
this.showDiv = !this.showDiv;
}
}
<div *ngIf="showDiv" style="width:450px;height:150px;border:2px solid black">
Expanded div
</div>
<br/>
<div (click)="showDetails()" style="width:100px;height:100px;border:2px solid black;clear:both;float:left">
tile 1
</div>
<div style="width:100px;height:100px;border:2px solid black;float:left;margin-left:10px">
tile 2
</div>
<div style="width:100px;height:100px;border:2px solid black;float:left;margin-left:10px">
tile 3
</div>