CODEWITHSUNDEEP
typescriptcontrolsaureliacomposition
Luka
Luka

Reputation: 4211

Aurelia: how to access child elements from parent element

I'm using Aurelia 1 to build my application. Now, I am creating a toolbar custom element: custom-toolbar.ts. This toolbar will have n-children elements called: custom-toolbar-button.ts.

My idea of usage is this:

/*some view html*/
<template>
   /*view stuff*/
   <custom-toolbar>
       <custom-toolabr-button title="button1" icon="btn1_ico" click.bind="buton1Clicked()"> </custom-toolbal-button>
       <custom-toolabr-button title="button2" icon="btn2_ico" click.bind="buton2Clicked()"> </custom-toolbal-button>
       ...
    </custom-toolbar>
</template>

Now, because I want this custom-toolbar to be responsive and to arrange (hide, shrink, display "hamburger" button when the viewport is small, ...) its buttons accordingly, it needs to know exactly how many buttons it have, and their width, so I can calculate total width and do some arrangement logic in custom-toolbar.

How can the parent custom-toolbar custom element know about it's child (so I can enumerate them) and then read every component width? Or How will my child component (button) report its width and itself to the parent?

Please help.

Upvotes: 2

Views: 714

Answers (1)

Luka
Luka

Reputation: 4211

Nvm, I found the answer... The answer is to use @children attribute like this:

import { customElement, children } from 'aurelia-framework';

@customElement('custom-toolbar')
@children({ name: 'buttons', selector: 'custom-toolbar-button' })
export class CustomToolbar {
   buttons = [];           
}

With this code I get buttons[] collection properly populated with my custom children elements.

Upvotes: 4

Related Questions