Estoy tratando de implementar un botón de zoom que usa getElementById para aumentar el ancho

 <span tslbutton (click)="zoomIn()"> <i class="fa fa-search-plus" aria-hidden="true"></i></span>

 zoomIn() { if (document.getElementById("left_pane").style.width == "25%") { document.getElementById("left_pane").style.width = "47%" } else if (document.getElementById("left_pane").style.width == "47%") { document.getElementById("left_pane").style.width = "100%" document.getElementById("left_pane").style.marginRight = "0" document.getElementById("left_pane").style.marginLeft = "0" } else { document.getElementById("left_pane").style.width = "25%" document.getElementById("left_pane").style.marginRight = "285px" document.getElementById("left_pane").style.marginLeft = "222px" } }

Este código aquí muestra una lupa, luego, al hacer clic en él, aumentará el tamaño de mi panel izquierdo en la pantalla.

El único problema aquí es que tengo que hacer clic dos veces en la imagen de la lupa para que se acerque. ¿Por qué sucede esto? ¿Y hay alguna manera de hacer que se acerque con el primer clic? ¿Hay una manera más elegante de hacer que esto funcione?