.resizable_div {
  border:1px solid red;
  white-space:nowrap; 
  width:100px;
  height:50px;
  line-height:50px; 
  overflow:hidden;
  text-overflow:ellipsis;
  /*margin:50px auto;*/
  padding:5px;
  resize:horizontal;
  cursor:col-resize;
  min-width:50px;
  max-width:150px;
}

<div >This is an example</div>

What I want to do here is to pull from the left side and make a resizeable div, that is, I want to enlarge or reduce it by holding it from the left side. (when i expand it should expand to the left and when i collapse it should contract to the right)

CodePudding user response：

If you want to make the item itself resizable you will need to change it using the same method as normal Javascript. One specific tip for Angular is that you could use an ElementRef to access the item and do it in the component code or attach an angular event binding to the div itself for the mouse events you wish to target.

Something like this could be a start:

<div (click)="resizeItem()">Resize Me</div>

and in your angular component file

function resizeItem(){
  // width changes either by updating a bound variable or attaching to the event target 
}

You can also read more about event binding concepts.

And if this is all still complicated, You might want to start by going through the Angular start guide.

CodePudding user response：

Thank you for your attention guys, this is how I found the solution

   resize: both;
    overflow: auto;
    direction: rtl;
    float: right;