@adonsio/adn-tournament/esm2015/lib/single-elimination-tree/single-elimination-tree.component.js

This packages allows you to generate Tournament Brackets in **Angular v12.2.4**. It's currently **work in progress** so use it at your own risk.

import { Component, Input } from '@angular/core';
export class SingleEliminationTreeComponent {
    constructor() {
    }
    ngOnInit() {
    }
    ngOnChanges(changes) {
        if (changes.hasOwnProperty('tournament') && changes.tournament.currentValue) {
            this.winnersBracket = this.tournament.rounds.filter(round => {
                return round.type === 'Winnerbracket';
            });
        }
        console.log(this.winnersBracket);
        //@ts-ignore
        this.final = this.tournament.rounds.filter(round => {
            return round.type === 'Final';
        }).shift();
        console.log(this.final);
    }
}
SingleEliminationTreeComponent.decorators = [
    { type: Component, args: [{
                selector: 'adn-single-elimination-tree',
                template: "<div class=\"ngtt-se__container\">\r\n    <div class=\"ngtt-se__bracket-wrapper\">\r\n      <ng-container *ngFor=\"let winnersround of winnersBracket; let i = index\">\r\n        <div class=\"ngtt-se__round-wrapper\">\r\n          <ng-container *ngFor=\"let match of winnersround.matches\">\r\n            <div class=\"ngtt-se__match-wrapper\">\r\n              <div class=\"ngtt-se__match-component-container\">\r\n                <ng-container *ngTemplateOutlet=\"matchTemplate; context:{$implicit: match}\"></ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container>\r\n        <div class=\"ngtt-se__round-wrapper\">\r\n          <div class=\"ngtt-se__match-wrapper\">\r\n            <div class=\"ngtt-se__finale-match-wrapper\">\r\n              <div class=\"ngtt-se__finale-component-container\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"matchTemplate; context:{$implicit: final.matches[0]}\"></ng-container>\r\n              </div>\r\n              <div class=\"ngtt-se__match-component-container\" *ngIf=\"final.matches.length > 1\">\r\n                <ng-container *ngTemplateOutlet=\"matchTemplate; context:{$implicit: final.matches[1]}\"></ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  ",
                styles: [""]
            },] }
];
SingleEliminationTreeComponent.ctorParameters = () => [];
SingleEliminationTreeComponent.propDecorators = {
    matchTemplate: [{ type: Input }],
    tournament: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2luZ2xlLWVsaW1pbmF0aW9uLXRyZWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRuLXRvdXJuYW1lbnQvc3JjL2xpYi9zaW5nbGUtZWxpbWluYXRpb24tdHJlZS9zaW5nbGUtZWxpbWluYXRpb24tdHJlZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQWdELE1BQU0sZUFBZSxDQUFDO0FBUTlGLE1BQU0sT0FBTyw4QkFBOEI7SUFRekM7SUFDQSxDQUFDO0lBRUQsUUFBUTtJQUNSLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsY0FBYyxDQUFDLFlBQVksQ0FBQyxJQUFJLE9BQU8sQ0FBQyxVQUFVLENBQUMsWUFBWSxFQUFFO1lBQzNFLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxFQUFFO2dCQUMxRCxPQUFPLEtBQUssQ0FBQyxJQUFJLEtBQUssZUFBZSxDQUFDO1lBQ3hDLENBQUMsQ0FBQyxDQUFDO1NBQ0o7UUFDRCxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUMvQixZQUFZO1FBQ2QsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDakQsT0FBTyxLQUFLLENBQUMsSUFBSSxLQUFLLE9BQU8sQ0FBQztRQUNoQyxDQUFDLENBQUMsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNYLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzFCLENBQUM7OztZQS9CRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLDZCQUE2QjtnQkFDdkMsdzZDQUF1RDs7YUFFeEQ7Ozs7NEJBRUUsS0FBSzt5QkFDTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMsIE9uSW5pdCwgU2ltcGxlQ2hhbmdlcywgVGVtcGxhdGVSZWZ9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge0FkblJvdW5kLCBBZG5Ub3VybmFtZW50fSBmcm9tICcuLi9kZWNsYXJhdGlvbnMvaW50ZXJmYWNlcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2Fkbi1zaW5nbGUtZWxpbWluYXRpb24tdHJlZScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3NpbmdsZS1lbGltaW5hdGlvbi10cmVlLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9zaW5nbGUtZWxpbWluYXRpb24tdHJlZS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTaW5nbGVFbGltaW5hdGlvblRyZWVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XHJcbiAgQElucHV0KCkgbWF0Y2hUZW1wbGF0ZSE6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgQElucHV0KCkgdG91cm5hbWVudCE6IEFkblRvdXJuYW1lbnQ7XHJcblxyXG4gIHB1YmxpYyB3aW5uZXJzQnJhY2tldCE6IEFkblJvdW5kW107XHJcbiAgICAvL0B0cy1pZ25vcmVcclxuICBwdWJsaWMgZmluYWw6IEFkblJvdW5kO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gIH1cclxuXHJcbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xyXG4gICAgaWYgKGNoYW5nZXMuaGFzT3duUHJvcGVydHkoJ3RvdXJuYW1lbnQnKSAmJiBjaGFuZ2VzLnRvdXJuYW1lbnQuY3VycmVudFZhbHVlKSB7XHJcbiAgICAgIHRoaXMud2lubmVyc0JyYWNrZXQgPSB0aGlzLnRvdXJuYW1lbnQucm91bmRzLmZpbHRlcihyb3VuZCA9PiB7XHJcbiAgICAgICAgcmV0dXJuIHJvdW5kLnR5cGUgPT09ICdXaW5uZXJicmFja2V0JztcclxuICAgICAgfSk7XHJcbiAgICB9XHJcbiAgICBjb25zb2xlLmxvZyh0aGlzLndpbm5lcnNCcmFja2V0KTtcclxuICAgICAgLy9AdHMtaWdub3JlXHJcbiAgICB0aGlzLmZpbmFsID0gdGhpcy50b3VybmFtZW50LnJvdW5kcy5maWx0ZXIocm91bmQgPT4ge1xyXG4gICAgICByZXR1cm4gcm91bmQudHlwZSA9PT0gJ0ZpbmFsJztcclxuICAgIH0pLnNoaWZ0KCk7XHJcbiAgICBjb25zb2xlLmxvZyh0aGlzLmZpbmFsKTtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==