CSS/Angular : Expanding a div - html

Question

The scenario of my project is:
when user clicks on "Animals" tile it should expand and other tiles should replace. Similarly, on click of "Plants" tile it should expand and other tiles should reorder.
===========1st View:============
===========2nd View==============
1st page shows, tile view
2nd page shows, the expanded div on click of the tile.
Please help me achieve this.
My code is as below. I am able to show hide the expanded tile but I am unable to hide the tile on which the user clicked and reordering the tile. Any hints to achieve this? I dont want expanding and 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>

Answer 1

I would suggest you use flexbox ( css ) for this.
On click of these tiles just change the flexbox properties.

Answer 2

I would recommend using the bootstrap classes like col-lg-12 with ngClass and variable whose value changes on click on the base of this variable change the bootstrap classes from col-lg-3 to col-lg-12

Answer 3

This problem can be solved using ViewChild decorator but I don't think such complicated solution is needed for this problem. We can instead simplify logic behind displaying tiles.
First of all we can move tile definitions to component and store them in tiles array;
tiles = [
{ name: 'Animals' },
{ name: 'Plants'},
{ name: 'Organisms'},
];
Then we create variable representing currently expanded tile and array with all not expanded tiles.
expandedTile = null;
notExpandedTiles = this.tiles; // at the beginning all tiles are not expanded
Having all this data, template can be refactored with usage of *ngFor directive. Additionaly inline styles were moved to separate css file.
<div *ngIf="expandedTile" class="expanded-tile">
{{expandedTile.name}}
</div>
<br/>
<div class="tiles">
<div *ngFor="let tile of notExpandedTiles;" (click)="showDetails(tile)" class="tile">
{{tile.name}}
</div>
</div>
When user click on some not expanded tile, it'll be passed as argument to showDetails function which will modify appropriate data.
showDetails(clickedTile) {
// assign clickedTile to expandedTile
this.expandedTile = clickedTile;
// Assign array of all tiles except clickedTile to notExpandedTiles
this.notExpandedTiles = this.tiles.filter(tile => tile !== clickedTile);
}
css:
.tile, .expanded-tile {
border: 2px solid black;
}
.tile {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 10px;
}
.expanded-tile {
width: 450px;
height: 150px;
}
demo: https://stackblitz.com/edit/angular-8wekfm