README

Form Minimap Angular

Angular module with components for Form Minimap. Please consult that documentation for further information on the concepts mentioned below. Please note that all boolean attributes are existenial (value ignored) rather than having a boolean value.

Getting Started

Installation

npm install --save @fmm/ng

Adding Form Minimap

The code sample below shows the lines added to a simple form to add a minimap (M) or a minimap with panel (P)

            import { Component, NgModule } from '@angular/core';
            import { BrowserModule } from '@angular/platform-browser';
M P         import { FmmNgModule } from '@eafmm/ng'

            @Component({
                selector: 'app-root',
                template: ` <div>
M                   <div #parent style='width:70px; height:50px; margin-left:200px'></div>
  P                 <div #anchor style='width:20px; height:20px; margin-left:200px'></div>
  P                 <fmm-ng-panel #panel></fmm-ng-panel>
                    <form>
M                       <fmm-ng-minimap [parent]='parent' title='Title'></fmm-ng-minimap>
  P                     <fmm-ng-minimap [anchor]='anchor' [panel]='panel' title='Title'></fmm-ng-minimap>
                        <input id="Input1"/><br/>
                        <input id="Input2"/><br/>
                        <input id="Input3"/><br/>
                        <input id="Input4"/>
                    </form>
                </div>`,
                styles: []
            })
            export class AppComponent { }

            @NgModule({
                declarations: [AppComponent],
                imports: [BrowserModule
M P                     , FmmNgModule
                ],
                providers: [],
                bootstrap: [AppComponent]
            })
            export class AppModule { }

API

FmmNgModule

Module containing all the components.

Components
FmmNgMinimap
FmmNgPanel

FmmNgMinimap

Component to create and manage a FmmMinimap. The minimap is detached when this component is destroyed. For minimaps in a panel, use the panel property; otherwise use the parent property to show an always-visible minimap, or anchor for a popup minimap.

Attribute	Type	Required	Description
aggregateLabels	FmmMapString
anchor	HTMLElement
customElementIds	string[]
debounceMsec	number
dynamicLabels	string[]
formGroup	FormGroup		FormGroup that contains the form's controls.
framework	FmmFramework
key	string		Minimap is recreated when key changes. Any previous minimap is detached.
namelessControls	FmmNgNamelessControls (= Record<string, AbstractControl>)		Additional FormControls, dentified by their form element's ID or NAME attribute, which may not be discoverable by traversing up the DOM tree and looking up formArrayName, formControlName, or formGroupName attribute on DOM elements.
page	HTMLElement
panel	FmmNgPanel	✓
parent	HTMLElement
title	string	✓
usePanelDetail	existential
useWidthToScale	existentialmv fmm
verbosity	number
zoomFactor	number

Event	Parameter	Description
update	FmmMinimapSnapshot	Dispatched when the minimap updates itself for whatever reason.

Method
destructor
takeSnapshot

FmmNgPanel

Component to create and manage a FmmPanel.

Attribute	Type	Required
detailParent	HTMLDivElement
vertical	existential

Method
destroyDetached

Usage no npm install needed!