2.48.0 • Published 4 months ago

@memberjunction/ng-container-directives v2.48.0

Weekly downloads
-
License
ISC
Repository
-
Last release
4 months ago

@memberjunction/ng-container-directives

Angular directives for container management in MemberJunction applications, providing flexible and responsive layout utilities.

Overview

This package provides two essential directives for managing container layouts in Angular applications:

  • mjContainer: Exposes a ViewContainerRef for dynamic component loading
  • mjFillContainer: Automatically resizes elements to fill their parent containers with intelligent context awareness

Features

  • mjContainer directive for view container management and dynamic component loading
  • mjFillContainer directive for responsive filling of parent containers
  • Automatic resizing on window resize events with dual debounce strategy
  • Manual resize event handling via MJGlobal event system
  • Customizable margin and dimension settings
  • Smart context detection (automatically skips resizing in grids, hidden tabs, and elements with mjSkipResize)
  • Efficient resize event handling with configurable debouncing
  • Debug mode for troubleshooting resize behavior

Installation

npm install @memberjunction/ng-container-directives

Usage

Import the module in your application:

import { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';

@NgModule({
  imports: [
    // ...
    ContainerDirectivesModule
  ]
})
export class YourModule { }

mjContainer

The mjContainer directive exposes a ViewContainerRef for dynamic component loading. This is particularly useful when you need to programmatically create and insert components into the DOM.

<div mjContainer></div>

In your component:

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { Container } from '@memberjunction/ng-container-directives';

@Component({
  selector: 'app-your-component',
  template: `<div mjContainer></div>`
})
export class YourComponent {
  @ViewChild(Container, { static: true }) container!: Container;
  
  ngOnInit() {
    // Access the ViewContainerRef for dynamic component creation
    const viewContainerRef: ViewContainerRef = this.container.viewContainerRef;
    
    // Example: Create a dynamic component
    // const componentRef = viewContainerRef.createComponent(YourDynamicComponent);
  }
}

mjFillContainer

Use the mjFillContainer directive to make an element fill its parent container:

<!-- Basic usage (fills both width and height) -->
<div mjFillContainer>Content</div>

<!-- With custom settings -->
<div 
  mjFillContainer
  [fillWidth]="true"
  [fillHeight]="true"
  [rightMargin]="10"
  [bottomMargin]="20">
  Content with margins
</div>

<!-- Fill only width -->
<div 
  mjFillContainer
  [fillWidth]="true"
  [fillHeight]="false">
  Content that fills width only
</div>

Skip Resize

If you need to prevent the resize behavior for certain elements:

<!-- This element will not be resized by the directive -->
<div mjSkipResize>Content</div>

Manual Resize Triggering

You can trigger manual resizing using the MemberJunction global events:

import { MJGlobal, MJEventType } from '@memberjunction/global';

// Trigger resize
MJGlobal.Instance.RaiseEvent({
  event: MJEventType.ManualResizeRequest,
  args: null
});

Configuration

The mjFillContainer directive has several configuration options:

PropertyTypeDefaultDescription
fillWidthbooleantrueWhether to fill the parent's width
fillHeightbooleantrueWhether to fill the parent's height
rightMarginnumber0Right margin in pixels
bottomMarginnumber0Bottom margin in pixels

How It Works

The mjFillContainer directive dynamically calculates and sets element dimensions based on its parent container:

  1. Parent container detection: The directive identifies the nearest block-level parent element.

  2. Size calculation:

    • When fillWidth is true, it calculates the element's width based on its parent's width, accounting for the element's position within the parent and any rightMargin.
    • When fillHeight is true, it calculates height similarly, accounting for the bottomMargin.
  3. Event handling: The directive listens for:

    • Window resize events (with two debounce times: 100ms during active resizing, 500ms after resizing completes)
    • Custom MJ application resize events via the MJGlobal event system
  4. Context-aware behavior: The directive automatically skips resizing under certain conditions:

    • Elements with the mjSkipResize attribute (or any parent with this attribute)
    • Elements within a grid (role="grid")
    • Elements within hidden tabs (not currently active)
    • Elements with hidden or not displayed parents

Common Use Cases

When to Use [fillHeight]="true" [fillWidth]="false"

  • Vertical scrollable areas where you want fixed width but dynamic height
  • Content panels that should stretch to fill available vertical space
  • Example: Sidebar navigation that fills vertical space but has fixed width

When to Use [fillHeight]="false" [fillWidth]="true"

  • Horizontal elements like headers or toolbars that span full width
  • Fixed-height components that need to adapt to different screen widths
  • Example: Form controls that adjust width but maintain consistent height

When to Use Both (Default)

  • Main content areas that should fill the entire available space
  • Split panels or layouts that need to adapt to window resizing
  • Example: Dashboards, content editors, or any primary workspace area

Performance Optimization

  • Minimize unnecessary instances: Only apply to containers that truly need dynamic sizing
  • Use mjSkipResize appropriately: Apply to elements that don't need resizing
  • Consider debouncing: The directive already implements debouncing, but be aware of performance impact with many instances

Nested Containers

When nesting components with mjFillContainer:

  1. The parent container should have the directive applied with appropriate settings
  2. Child elements inherit the size constraints of their parents
  3. Adjustments are calculated top-down, so parent resizing triggers child resizing
  4. Example:
<div mjFillContainer [fillHeight]="true" class="main-container">
  <div class="header" style="height: 60px;">Header</div>
  <div mjFillContainer [fillHeight]="true" class="content-area">
    <!-- This will fill the remaining height after the header -->
    Content
  </div>
</div>

Dependencies

This package depends on:

  • @memberjunction/core - Core MemberJunction utilities and logging
  • @memberjunction/global - Global event system for manual resize triggers
  • rxjs - For event handling and debouncing

Peer dependencies:

  • @angular/common ^18.0.2
  • @angular/core ^18.0.2
  • @angular/router ^18.0.2

Troubleshooting

Element not resizing properly

  • Check if any parent has mjSkipResize attribute
  • Verify the element isn't within a grid (role="grid") or hidden tab
  • Ensure parent elements have proper CSS display properties (must be 'block')
  • Check z-index and overflow settings
  • Verify parent visibility (elements with hidden or not displayed parents are skipped)

Flickering during resize

  • This is usually caused by cascading resize calculations
  • Try applying mjFillContainer only where necessary
  • Use CSS transitions for smoother visual changes
  • Consider the dual debounce strategy (100ms during resize, 500ms after)

Height calculation issues

  • Ensure parent element has a defined height or position
  • For full window height, apply directive to a root element
  • Check for competing CSS that might override the directive's styles
  • Note that padding is accounted for in calculations

Advanced Controls

For debugging or special cases, there are static properties on the FillContainer class:

import { FillContainer } from '@memberjunction/ng-container-directives';

// Disable resize globally (for all instances)
FillContainer.DisableResize = true;

// Enable resize debugging (logs to console)
FillContainer.OutputDebugInfo = true;

API Reference

Container Directive

@Directive({
  selector: '[mjContainer]'
})
export class Container {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

FillContainer Directive

@Directive({
  selector: '[mjFillContainer]'
})
export class FillContainer {
  @Input() fillWidth: boolean = true;
  @Input() fillHeight: boolean = true;
  @Input() rightMargin: number = 0;
  @Input() bottomMargin: number = 0;
  
  static DisableResize: boolean = false;
  static OutputDebugInfo: boolean = false;
}

Contributing

When contributing to this package: 1. Follow the MemberJunction development guidelines 2. Ensure all TypeScript compiles without errors: npm run build 3. Update this README if adding new features or changing behavior 4. Add appropriate TSDoc comments to all public APIs

2.23.2

8 months ago

2.46.0

4 months ago

2.23.1

8 months ago

2.34.0

6 months ago

2.19.4

9 months ago

2.19.5

9 months ago

2.19.2

9 months ago

2.19.3

9 months ago

2.19.0

9 months ago

2.19.1

9 months ago

2.34.2

6 months ago

2.34.1

6 months ago

2.45.0

4 months ago

2.22.1

8 months ago

2.22.0

8 months ago

2.22.2

8 months ago

2.33.0

6 months ago

2.18.3

9 months ago

2.18.1

9 months ago

2.18.2

9 months ago

2.18.0

9 months ago

2.21.0

8 months ago

2.44.0

5 months ago

2.29.0

7 months ago

2.29.2

7 months ago

2.29.1

7 months ago

2.32.0

7 months ago

2.32.2

7 months ago

2.32.1

7 months ago

2.17.0

9 months ago

2.43.0

5 months ago

2.20.2

9 months ago

2.20.3

8 months ago

2.20.0

9 months ago

2.20.1

9 months ago

2.28.0

8 months ago

2.31.0

7 months ago

2.39.0

5 months ago

2.16.1

9 months ago

2.16.0

9 months ago

2.42.1

5 months ago

2.42.0

5 months ago

2.27.1

8 months ago

2.27.0

8 months ago

2.30.0

7 months ago

2.15.2

9 months ago

2.15.0

9 months ago

2.15.1

9 months ago

2.38.0

5 months ago

2.41.0

5 months ago

2.26.1

8 months ago

2.26.0

8 months ago

2.37.1

5 months ago

2.37.0

5 months ago

2.14.0

9 months ago

2.40.0

5 months ago

2.25.0

8 months ago

2.48.0

4 months ago

2.13.4

10 months ago

2.36.0

6 months ago

2.13.2

11 months ago

2.13.3

10 months ago

2.13.0

11 months ago

2.36.1

6 months ago

2.13.1

11 months ago

2.47.0

4 months ago

2.24.1

8 months ago

2.24.0

8 months ago

2.12.0

12 months ago

2.35.1

6 months ago

2.35.0

6 months ago

2.23.0

8 months ago

2.11.0

12 months ago

2.10.0

12 months ago

2.9.0

12 months ago

2.8.0

1 year ago

2.7.0

1 year ago

2.7.1

1 year ago

2.6.1

1 year ago

2.6.0

1 year ago

2.5.2

1 year ago

1.6.1

1 year ago

1.6.0

1 year ago

2.4.1

1 year ago

2.4.0

1 year ago

2.0.0

1 year ago

1.5.3

1 year ago

1.5.2

1 year ago

1.5.1

1 year ago

1.5.0

1 year ago

2.3.0

1 year ago

2.3.2

1 year ago

2.3.1

1 year ago

2.3.3

1 year ago

1.8.1

1 year ago

1.8.0

1 year ago

1.4.1

1 year ago

1.4.0

1 year ago

2.2.1

1 year ago

2.2.0

1 year ago

1.7.1

1 year ago

1.7.0

1 year ago

1.3.3

1 year ago

1.3.2

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

2.1.2

1 year ago

2.1.1

1 year ago

2.5.0

1 year ago

2.1.4

1 year ago

2.1.3

1 year ago

2.5.1

1 year ago

2.1.5

1 year ago

1.2.2

1 year ago

1.2.1

1 year ago

1.2.0

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.0.11

1 year ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.8-next.6

2 years ago

1.0.8-next.5

2 years ago

1.0.8-next.4

2 years ago

1.0.8-next.3

2 years ago

1.0.8-next.2

2 years ago

1.0.8-next.1

2 years ago

1.0.8-next.0

2 years ago

1.0.7-next.0

2 years ago

1.0.8-beta.0

2 years ago

1.0.6

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.9.150

2 years ago

0.9.151

2 years ago

0.9.149

2 years ago

0.9.147

2 years ago

0.9.148

2 years ago

0.9.146

2 years ago

0.9.143

2 years ago

0.9.142

2 years ago

0.9.145

2 years ago

0.9.144

2 years ago

0.9.141

2 years ago

0.9.139

2 years ago

0.9.138

2 years ago

0.9.140

2 years ago

0.9.136

2 years ago

0.9.135

2 years ago

0.9.134

2 years ago

0.9.133

2 years ago

0.9.132

2 years ago

0.9.131

2 years ago

0.9.130

2 years ago

0.9.129

2 years ago

0.9.128

2 years ago

0.9.125

2 years ago

0.9.124

2 years ago

0.9.127

2 years ago

0.9.123

2 years ago

0.9.121

2 years ago

0.9.120

2 years ago

0.9.122

2 years ago

0.9.118

2 years ago

0.9.117

2 years ago

0.9.119

2 years ago

0.9.116

2 years ago

0.9.115

2 years ago

0.9.114

2 years ago

0.9.112

2 years ago

0.9.113

2 years ago

0.9.111

2 years ago

0.9.110

2 years ago

0.9.109

2 years ago

0.9.103

2 years ago

0.9.97

2 years ago

0.9.92

2 years ago

0.9.93

2 years ago

0.9.91

2 years ago

0.9.90

2 years ago

0.9.89

2 years ago

0.9.85

2 years ago

0.9.86

2 years ago

0.9.87

2 years ago

0.9.88

2 years ago

0.9.81

2 years ago

0.9.82

2 years ago

0.9.83

2 years ago

0.9.84

2 years ago

0.9.80

2 years ago

0.9.74

2 years ago

0.9.72

2 years ago

0.9.73

2 years ago

0.9.70

2 years ago

0.9.71

2 years ago

0.9.67

2 years ago

0.9.68

2 years ago

0.9.69

2 years ago

0.9.65

2 years ago

0.9.66

2 years ago

0.9.64

2 years ago

0.9.63

2 years ago

0.9.62

2 years ago

0.9.57

2 years ago

0.9.58

2 years ago

0.9.59

2 years ago

0.9.60

2 years ago

0.9.61

2 years ago

0.9.56

2 years ago

0.9.55

2 years ago

0.9.53

2 years ago

0.9.54

2 years ago

0.9.52

2 years ago

0.9.51

2 years ago

0.9.50

2 years ago

0.9.49

2 years ago

0.9.48

2 years ago

0.9.47

2 years ago

0.9.46

2 years ago

0.9.45

2 years ago

0.9.44

2 years ago

0.9.43

2 years ago

0.9.42

2 years ago

0.9.41

2 years ago

0.9.40

2 years ago

0.9.39

2 years ago

0.9.33

2 years ago

0.9.32

2 years ago

0.9.31

2 years ago

0.9.29

2 years ago

0.9.28

2 years ago

0.9.27

2 years ago

0.9.26

2 years ago

0.9.25

2 years ago

0.9.24

2 years ago

0.9.23

2 years ago

0.9.22

2 years ago

0.9.21

2 years ago

0.9.20

2 years ago

0.9.19

2 years ago

0.9.18

2 years ago

0.9.17

2 years ago

0.9.16

2 years ago

0.9.15

2 years ago

0.9.14

2 years ago

0.9.13

2 years ago

0.9.12

2 years ago

0.9.11

2 years ago

0.9.10

2 years ago

0.9.9

2 years ago

0.9.8

2 years ago

0.9.7

2 years ago

0.9.6

2 years ago

0.9.5

2 years ago

0.9.4

2 years ago

0.9.3

2 years ago

0.9.2

2 years ago

0.9.1

2 years ago