# ng-tournament-tree

> Tournament-Tree render components for Angular. Includes single- and double-elimination trees. You can also customize how a match is displayed by providing your own component.

Latest version **2.0.2** (published 2019-09-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-tournament-tree
pnpm add ng-tournament-tree
yarn add ng-tournament-tree
bun add ng-tournament-tree
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2019-09-29 |
| First published | 2019-06-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 135.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Oliver Happe |
| Maintainers | joermung |
| Keywords | angular, ng, tournament, tournament-tree, tournament-bracket, bracket, flow-chart, chart, tree, scss, components, match |

## Links

- npm: https://www.npmjs.com/package/ng-tournament-tree
- Repository: https://gitlab.com/joermunG/tournament-tree
- Issues: https://gitlab.com/joermunG/tournament-tree/issues
- npm.io page: https://npm.io/package/ng-tournament-tree

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 2.0.2 (latest) — 2019-09-29
- 2.0.1 — 2019-09-29
- 2.0.0 — 2019-09-29
- 1.0.1 — 2019-06-03
- 1.0.0 — 2019-06-02
- 0.0.1 — 2019-06-02

## README

# NgTournamentTree

Tournament-Tree render components for Angular. Includes single- and double-elimination trees with full scss configuration. You can also customize how a match is displayed by providing your own component.

## Preview

 [Launch preview on Stackblitz](https://ng-tournament-tree.stackblitz.io)

## How To Use

 * Import `NgTournamentTreeModule` into your module. You can also import a single tree component by using `NgttSingleEliminationTree` or `NgttDoubleEliminationTree`.
 
 * Import `@import '~ng-tournament-tree/styles/ngtt-styles'` into your `styles.scss` file.
 
## Styles configuration

 * Create a separate `my-tree-configuration.scss` styles file.
 
 * Add `@import '~ng-tournament-tree/styles/ngtt-styles'` into your new stylesheet.
 
 * Overwrite the values you want to change.
 
 * Import your own variables file before importing `ngtt-styles.scss` in your main `styles.scss`
 
 **styles.scss**
 ```scss
 @import 'my-tree-configuration';
 @import '~ng-tournament-tree/styles/ngtt-styles';
 
 // other imports
 ```

## Adding a Match-Display Component

 * Create a new component e.g. `my-match.component`
 
 * Your component should have one input of type `NgttMatch`
 
 * Create a templateRef to your component
 
 **app.component.html**
  ```html
  <ngtt-single-elimination-tree 
    [tournament]="myTournamentData" 
    [matchTemplate]="myMatchTemplate">
  </ngtt-single-elimination-tree>
  
  <ng-template #myMatchTemplate let-match>
    <my-match [match]="match"></my-match>
  </ng-template>
  ```
  
  The Tournament-Tree components will provide the match to render as `$implicit` value to your templateRef.
  
## Data Model

```typescript
export interface NgttTournament {
  rounds: NgttRound[];
}

export interface NgttRound {
  /**
   * The type determines in which branch to place a match.
   * SingleElimination-Trees only consist of a Winnerbracket and a Final-Bracket
   */
  type: 'Winnerbracket' | 'Loserbracket' | 'Final';
  matches: any[];
}
```

The Tree-Components render the matches in the order they appear in the `matches`-Array.

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