warehause.ts
==========================================
import { Component, OnInit } from '@angular/core';
import { ArticleService } from '../../services/article.service'
import { SelectMultipleControlValueAccessor } from '@angular/forms';
import { element } from '@angular/core/src/render3';

@Component({
  selector: 'app-warehause',
  templateUrl: './warehause.component.html',
  styleUrls: ['./warehause.component.css']
})
export class WarehauseComponent implements OnInit {

  public warehause:any;
  public warehause2:any;
  public sectorWidth:number = 10;
  public sectorHeight:number = 15;
  Arr = Array;
  num:number = 10;
  input = 'ijkk';
  timer;
  hoveredElemSector;
  hoveredElemNumber;

  constructor(private warehauseService: ArticleService) { }

  ngOnInit() {
    this.warehauseService.getAll('9').subscribe(data => {
      this.warehause = data;
    });
    document.getElementById('#divek');
    debugger
  }

  displayContentInCart(compartment, num, sec){
    debugger

    this.timer = setTimeout(() =>
    {
      let elm = document.getElementById("cart");

      elm.style.top =  String(compartment.pageY - 250) + "px";
      elm.style.left = String(compartment.pageX - 100) + "px";
      elm.style.visibility = "visible"
      this.hoveredElemSector = sec;
      this.hoveredElemNumber = num;
    },
    700);
  }

  unvisibleCart(){
    let elm = document.getElementById("cart");
    elm.style.visibility = "hidden"
    clearTimeout(this.timer)
    this.hoveredElemSector = undefined;
    this.hoveredElemNumber = undefined;

  }


}

warehause.html
==========================================

<div class="background">
<!!=:=><b>Mapa magazynu sektor A</b></div>
<div class = "container pt-2" style = "text-align:center; background-color:transparent; min-height:90vh; height:100%">

  <div *ngFor = "let k of Arr(sectorHeight); let j = index;">
    <div style="text-align: center" *ngFor = "let k of Arr(sectorWidth).fill(1); let i = index">
      <div class="asd" routerLink="/detail/{{1 + j*sectorWidth + i}}" style = "cursor: pointer;width: 9.7%; height: 40px;
       margin-left:0.25%; margin-bottom:4px; float:left" (mouseenter)="displayContentInCart($event,1 + j*sectorWidth + i, 'sectorA')"
        (mouseleave)="unvisibleCart()">{{1 + j*sectorWidth + i}}</div>
    </div>
  </div>

  <button style = "margin-left:10px" class="btn btn-warning">Bootstrap Button</button>
  <div>

</div>

<div id="cart" class = "card" style="background-color: rgb(227, 240, 227); width:150px;height:250px; ">
Sektor: {{hoveredElemSector}}
<br>
Numer skrytki: {{hoveredElemNumber}}
</div>

warehause.css
===========================================================
#div2, #div4, #div6 {
  padding: 50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  background: rgba(100,100,100,0.5);
  -webkit-transform-style: preserve-3d; /* Safari 3-8  */
  -webkit-transform: rotateX(45deg); /* Safari 3-8  */
  transform-style: preserve-3d;
  transform: rotateX(45deg);
}

#div3 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 1px solid blue;
  -webkit-perspective: 100px; /* Safari 4-8  */
  -webkit-perspective-origin: bottom right; /* Safari 4-8  */
  perspective: 100px;
  perspective-origin: bottom right;
}

#div5 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 1px solid blue;
  -webkit-perspective: 100px; /* Safari 4-8  */
  -webkit-perspective-origin: -90%; /* Safari 4-8  */
  perspective: 100px;
  perspective-origin: right;
}

.background{
  background-image: url("../../../assets/footer_lodyas.png");
}

.card{
  position: absolute;
  left: 100px;
  top: 150px;
  visibility: hidden;
}

.asd{
  background-color: green;
}

.asd:hover{
  background-color: red;
}