How To Float Div Onclick

In this article we are learn about how to float div right and left on click in angular.

For this add following code in app.component.html file :

<div class="w-25">
  <span id="right" style="float: right;" class="border mx-2"><img src="../assets/images/right_img.png" alt=""></span>
  <span id="left" style="float: left;" class="border mx-2"><img src="../assets/images/left_img.png" alt=""></span>
</div>

  <button type="button" class="btn border border-dark mt-5 mx-2" (click)="floatRight()">Float right</button>
  <button type="button" class="btn border border-dark mt-5 mx-2" (click)="floatLeft()">Float left</button>

For this add following code in app.component.ts file :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  floatRight() {
    var right: any = document.getElementById("right")
    right.style.float = "right";
    var left: any = document.getElementById("left")
    left.style.float = "left";
  }
  floatLeft() {
    var right: any = document.getElementById("right")
    right.style.float = "left";
    var left: any = document.getElementById("left")
    left.style.float = "right";
  }

}

Output :