ng-tournament-tree v2.0.2

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.