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.
-
Import
NgTournamentTreeModule
into your module. You can also import a single tree component by usingNgttSingleEliminationTree
orNgttDoubleEliminationTree
. -
Import
@import '~ng-tournament-tree/styles/ngtt-styles'
into yourstyles.scss
file.
-
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 mainstyles.scss
styles.scss
@import 'my-tree-configuration';
@import '~ng-tournament-tree/styles/ngtt-styles';
// other imports
-
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.
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.