CODEWITHSUNDEEP
javascriptaurelia
Greg Sherman
Greg Sherman

Reputation: 1144

Difference between HTML component and a normal component in Aurelia?

I'm starting with the standard TypeScript skeleton for my Aurelia development.

I wanted to add some code to the "nav-bar" component, so I decided to convert it from a simple HTML-only component to a regular component. To this end, I modified the require tag in my app.html from:

<require from="nav-bar.html"></require>

to

<require from="nav-bar"></require>

Next, I created a nav-bar.ts file, which contained the following code:

import {autoinject} from 'aurelia-framework';
import {customElement, bindable} from 'aurelia-framework';
// import {HttpClient} from 'aurelia-fetch-client';

@autoinject
@customElement('nav-bar')
export class NavBarClass {
    public attached() {
        console.log("TEST");
    }
  }
}

I left the nav-bar.html exactly as is. Now the program runs and the console contains the TEST value from the instantiated NavBarClass, BUT the menu that used to be displayed when nav-bar was HTML-only is now missing.

How do I get the menu back? What am I doing wrong? How does a regular component differ from an HTML-only component?

Thanks for your help, -Greg

Upvotes: 1

Views: 295

Answers (1)

Jeremy Danyow
Jeremy Danyow

Reputation: 26406

In a standard custom element the bindable properties are defined in the view-model:

nav-bar.js:

export class NavBar {
  @bindable router;
  ...
  ...
}

In an html-only custom element, there is no view-model so the bindable properties are listed on the <template> element's bindable attribute instead:

nav-bar.html:

<template bindable="router">
  ...
  ...
</template>

Either way the nav-bar element usage is the same:

<nav-bar router.bind="router"></nav-bar>

Upvotes: 7

Related Questions