Angle Bracket Components

application.controller.js

import Controller from '@ember/controller';

export default Controller.extend({
  appName: 'Angle Bracket Components'
});

application.template.hbs

<div class="container">
	<h1>{{appName}}</h1>
	<div class="row mb-5">
    <div class="col-12">
      <h4>Inline Components</h4>
      <div>
      	{{!-- classic syntax --}}
        {{!-- doesnt work with single word components --}}
        {{!-- {{foo name="Bill"}} --}}
      
      	{{!-- angle bracket syntax --}}
      	<Foo @name="Bill" tabindex=5 />
      </div>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-12">
      <h4>Block Components</h4>
      <div>
      	{{!-- classic syntax --}}
        {{#block-component as |cmp|}}
        	Yielded content
          {{cmp.child text="Some value"}}
        {{/block-component}}
        
        {{!-- angle bracket syntax --}}
        <BlockComponent as |Cmp|>
        	Yielded content
        	<Cmp.child @text="Some value" />
        </BlockComponent>
      </div>
    </div>
  </div>
</div>
{{outlet}}

block-component.component.js

import Component from '@ember/component';

export default Component.extend({
  classNames: ['block-component']
});

block-component.template.hbs

{{yield (hash
	child=(component "child-component")
)}}

child-component.component.js

import Component from '@ember/component';

export default Component.extend({
  classNames: ['child-component']
});

child-component.template.hbs

Child Component<br>
<strong>Passed arg:</strong> {{text}}

foo.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['foo']
});

foo.template.hbs

Hello, {{name}}!

styles.app.css

.foo {
	padding: 1rem;
  margin-bottom: 0.5rem;
  background: lightblue;
  border: 1px solid blue;
}

.block-component {
  padding: 1rem;
  margin-bottom: 0.5rem;
  background: lightgreen;
  border: 1px solid green;
}

.child-component {
  padding: 1rem;
  margin-bottom: 0.5rem;
  background: limegreen;
  border: 1px solid darkgreen;
}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3",
    "bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}