ng-bootstrap

Resizable

bs-resizable wraps any content in a panel with draggable edges. Each glyph is also a focusable separator: the arrow keys move its edge by 10px, Shift by 1px. Set [positioning] to 'absolute' when the wrapper should grow inside a positioned layout instead of inline; (resized) reports the geometry written and [labels] translates the glyphs' names.

Basic usage

  
    
      
        <bs-resizable>
        
    
      
          <div class="p-2 h-100">
        
    
      
            Drag the handle on the edges to resize this panel.
        
    
      
          </div>
        
    
      
        </bs-resizable>
        
    

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import { BsResizableComponent } from '@mintplayer/ng-bootstrap/resizable';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-resizable-demo',
        
    
      
          templateUrl: './my-resizable-demo.component.html',
        
    
      
          imports: [BsResizableComponent],
        
    
      
        })
        
    
      
        export class MyResizableDemoComponent {}

Inline positioning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit consectetur ipsam qui libero commodi facilis velit voluptatum, ad aliquam soluta, repellat adipisci dignissimos nostrum suscipit fuga autem aut expedita ullam. 

  
    
      
        <!-- Default: the wrapper grows inline with surrounding content. -->
        
    
      
        <bs-resizable>
        
    
      
          <div class="p-2 h-100">Drag any edge to resize.</div>
        
    
      
        </bs-resizable>

Absolute positioning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit consectetur ipsam qui libero commodi facilis velit voluptatum, ad aliquam soluta, repellat adipisci dignissimos nostrum suscipit fuga autem aut expedita ullam. 

  
    
      
        <!-- [positioning]="'absolute'" — wrapper is positioned inside a
        
    
      
             positioned ancestor; useful for floating / overlay layouts. -->
        
    
      
        <bs-resizable [positioning]="'absolute'">
        
    
      
          <div class="p-2 h-100">Drag any edge to resize.</div>
        
    
      
        </bs-resizable>

Another header