Question from a new guy

#1

Hi guys,

I am new here, and new with ember.js. I’ve got a problem with some simple tasks like - how to make a component and than nest it into template/route (I have no idea whats its name)

I created component (for example) with code: <h1>hello</h1>

I called this component “hello” - file .hbs hello.hbs.

I thought it will be work if I put into bigger section (into templates I generated by route terminal command) smth like: {{hello}} - and the browser will show on the screen H1 header with text “hello”, but It didn’t - could you tell me why? (Please dont tell me I should look for answers into docs - I spend some time there already)

cheers!

#2

Assuming you also created a js file for the component, it should show “hello”. Otherwise your code might need some tweaking.

#3

hello @mroz, Welcome to Ember

Component in ember must have a “-” in it .eg. hello-world if you are use ember-cli use the comand “ember g component hello-world” Please refer to https://guides.emberjs.com/release/components/defining-a-component/

Once the hbs and js file is created for the component. Add your code

then in the route which have a template and .js , add {{component-name}} in the hbs file eg.{{hello-world}}

i am also new here:)

2 Likes
#4

As a small note, with latest ember, components can be single words. <Hello />

#5

You don’t need a JS file! Just the file you have, but you need the filename to have a hyphen in the name, and then invoke it with the new name. (Or use Angle Bracket invocation, as @NullVoxPopuli suggested)