# ngx-dom-manager

> This is a directive that allows to manage the dom of the element in which is included.

Latest version **0.1.3** (published 2018-03-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-dom-manager
pnpm add ngx-dom-manager
yarn add ngx-dom-manager
bun add ngx-dom-manager
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2018-03-29 |
| First published | 2018-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Xavier Abelló |
| Maintainers | xabe80 |
| Keywords | angular, angular2, angular 2, angular5, dom, manipulation |

## Links

- npm: https://www.npmjs.com/package/ngx-dom-manager
- Repository: https://github.com/xabe80/ngx-dom-manager
- Homepage: https://github.com/xabe80/ngx-dom-manager#readme
- Issues: https://github.com/xabe80/ngx-dom-manager/issues
- npm.io page: https://npm.io/package/ngx-dom-manager

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2018-03-29
- 0.1.2 — 2018-03-29
- 0.1.1 — 2018-03-29
- 0.1.0 — 2018-03-29

## README

# NgxDomManager

This is a directive that allows to manage the dom of the element in which is included. 

This will provide methods that can be called on the outside context to manage the DOM of the element. 

The directive is in an early stage and more methods will be added. Contributors are welcome since it is an open source project.

## Demo 

https://plnkr.co/edit/mSIQktaTp18ip7Kulhpl?p=preview

## Installation

    npm install ngx-dom-manager
    
## Usage

Simply include the directive and the parent component will have access to its methods.
```html
<div ngxDomManager></div>
```

```typescript
import {Component, ElementRef, ViewChild} from '@angular/core';
import { NgxDomManagerDirective } from 'ngx-dom-manager';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  /** Reference to directive API methods */
  @ViewChild(NgxDomManagerDirective) ngxDomManager:NgxDomManagerDirective;

  constructor(private el:ElementRef) { }

  /**
   * On click test append button
   */
  onClickAppendButton() {
    let elementToAppend = this.el.nativeElement.querySelector(".test-source-element");
    console.debug("Test button", elementToAppend);
    this.ngxDomManager.appendToRoot(elementToAppend);
  }
}
```

## Directive API methods

* appendToRoot(viewRef: ViewRef): This will append an element to the end of the component container

---
_Source: https://npm.io/package/ngx-dom-manager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._