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

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

@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

<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

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.