Resizable

Resize your panels component effortlessly

This library contains an angular standalone component ResizableDirective that allows you to resize easily panels.

Demo

stackblitz

Directive

• resizable is a directive to annotate an element that you want resize.

<div style="display: flex; flex-direction: row">
 <div resizable [percent]="33">
   <!-- What you want here -->
 </div>
 <div resizable [percent]="67">
   <!-- What you want here -->
 </div>
</div>

Installation

For help getting started with a new Angular app, check out the Angular CLI.

For existing apps, follow these steps to begin using @hhangular/resizable in your Angular app.

Install @hhangular/resizable

You can use either the npm or yarn command-line tool to install the package.
Use whichever is appropriate for your project in the examples below.

NPM

# @hhangular/resizable
npm install @hhangular/resizable --save 

YARN

# @hhangular/resizable
yarn add @hhangular/resizable

Peer dependence

No dependency

Configuration

Just import the standalone component ResizableDirective and you can use the directive.
You can do this in your Components or AppModule or in your SharedModule indifferently.

Component.ts

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [ResizableDirective],
  template: `
  ...
  `,
})
export class Component {
  ...
}

---

AppModule.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import {HttpClientModule} from '@angular/common/http';
import {AppComponent} from './app.component';
// ================= IMPORT =================
import {ResizableDirective} from '@hhangular/resizable';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    CommonModule,
    HttpClientModule,
// ================= IMPORT =================
    ResizableDirective,
  ],
  bootstrap: [AppComponent],
  providers: []
})
export class AppModule {
}

---

SharedModule.ts

import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
// ================= IMPORT =================
import {ResizableDirective} from '@hhangular/resizable';

@NgModule({
  imports: [
    CommonModule,
// ================= IMPORT =================
    ResizableDirective,
  ],
  exports: [
// ================= EXPORT =================
    ResizableDirective,
  ],
  declarations: [],
})
export class SharedModule {
}

Use

The use of 'Directive': resizable is very simple.

Use cases

You want to split your UI in different area resizable

---

In a component template just decorate a div (or other) as follows:

 <div style="display: flex; flex-direction: column">
  <div style="display: flex; flex-direction: row">
    <div resizable [percent]="33">
      <!-- What you want here -->
    </div>
    <div resizable [percent]="67">
      <!-- What you want here -->
    </div>
  </div>
  <div style="display: flex; flex-direction: row">
    <div resizable [percent]="33">
      <!-- What you want here -->
    </div>
    <div resizable [percent]="33">
      <!-- What you want here -->
    </div>
    <div resizable [percent]="33">
      <!-- What you want here -->
    </div>
  </div>
</div>

The container flex direction set the resizable direction

Inputs

<div resizable [percent]="33" min="200px" max="50%">

name	description	type	sample
percent	The initial percent size	number	33
min	The minimal size of panel in % or px	string	200px or 20%
max	The maximum size of panel in % or px	string	500px or 30%

Outputs

<div resizable [percent]="33" (percentChange)="percentChangeHandler($event)">

name	description	type	sample
percentChange	The percent size	number	33.333