Using with Angular

[YouNone]

I installed three packages:

"brackets-manager": "^1.2.7",
"brackets-model": "^1.3.5",
"brackets-viewer": "^1.3.1"

But after this operation I could not find a detailed example of the installation. I was able to run the example with db.json and index html file, but that's all.

Therefore, I wanted to know if it can be run under angular and if so, how?

[Drarig29]

Yes you can do it, but manually. It's a vanilla library.

You have an example using React here, you can take inspiration from it.

Basically, you need to add the library in your index.html in the public folder.

Once loaded in this file, the library will add a global variable bracketsViewer that you can use directly in your Angular code.

[Drarig29]

Currently the manager can't be used in the browser, you need to use it with Node.js, in a back-end.

Edit: apparently you don't have any problem with Angular. (linking with Drarig29/brackets-manager.js#57)

And serving modules from your node_modules is a bad practice, so you should import the viewer with <script> and <link> tags (for JS and CSS).

[YouNone]

Thanks for the quick answer, I wanted to clarify if it is possible to access the bracketsViewer variable in a specific component?

I need something like this:

           
import { bracketsViewer } from "brackets-viewer"

export class Component implements OnInit {
    async getData() {
        const manager = new BracketsManager(storage);
        const example = {
                name: 'Example',
                tournamentId: 1,
                type: 'double_elimination',
                seeding: ['Team 1', 'Team 2', 'Team 3', 'Team 4', 'Team 5', 'Team 6', 'Team 7', 'Team 8'],
                settings: { seedOrdering: ['natural'] },
        };

        await manager.create(example);

        const stage = await storage.select('stage', 0);
        console.log(stage);
    }

    ngOnInit() {
        this.getData();
    }
}

And how to display in component-tree.html?

[Drarig29]

You don't need to import bracketsViewer in your components.

Add this in your index.html :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/brackets-viewer/dist/brackets-viewer.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brackets-viewer/dist/brackets-viewer.min.js"></script>

The library will define a global variable in the window object. So if you prefer, you can access it with window.bracketsViewer.

[Drarig29]

After that, adding an empty div in your component-tree.html should do the job:

<div class="bracket-viewer"></div> 

[YouNone]

Thanks again for the quick answer, the tree is displayed.

[aydinduygu]

Thanks again for the quick answer, the tree is displayed.

Hi, do you still have the code for angular? Can you show how did you call the lib in ts file, thanks in advance

[Drarig29]

Ping @YouNone

[aydinduygu]

Hi @Drarig29; I am trying to implement in angular project. Although i have a html element with class name 'brackets-viewer', I am getting this error:

It says 'Root not found'. Can you please help me. Thanks in advance

[Drarig29]

Which version of the viewer do you use?

[aydinduygu]

Hi again, I just removed this 't' from the code in the lib and problem is fixed (I hope). I have no idea why this works :-). Thanks for your interest

[Drarig29]

In your screenshot, t is the name for selector in the minified code. The selector parameter is passed here:

brackets-viewer.js/src/main.ts

Line 85 in 4c9c685

findRoot(config?.selector).append(root);

So you might have a selector property passed in your bracketsViewer.render() call, just like here:

brackets-viewer.js/demo/with-api.html

Line 62 in 4c9c685

selector: '#example',

And this parameter overrides the default .brackets-viewer selector.