how to access properties passed to Ember Component inside a component-class? - ember.js

Question

I have DECLARED an emberjs component in template as:
<script type="text/x-handlebars" id="components/custom-component">
<h4>The name of the object passed is : {{object.name}}</h4>
{{#if show_details}}
<p>The details of the object passed are : {{object.details}}</p>
{{/if}}
</script>
Now I am USING this component in my html template as :
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each object in model}}
<li>{{custom-component object=object}}</li>
{{/each}}
</ul>
</script>
My component class for custom-component is as shown below :
App.CustomComponentComponent = Ember.Component.extend({
show_details: function() {
// return true or false based on the OBJECT's property (e.g. "true" if object.type is 'AUTHORIZED')
},
});
Update
The way I achieved it is as follows :
App.CustomComponentComponent = Ember.Component.extend({
show_details: function() {
var object = this.get('object');
if (object.type == "AUTHORIZED")
return true;
else
return false;
}
});
The parameters passed to the component class are available using it's get methods.

Answer 1

It should work this way:
{{custom-component object_name=object}}
(you just used the wrong property name).
This should work if object is the object name. If name is a property of object then use object.name.
UPDATE
This should be straightforward. show_details should be defined as computed property depending on the object type:
App.CustomComponentComponent = Ember.Component.extend({
object: null,
show_details: function() {
var object = this.get('object');
if (object.get('type') === "AUTHORIZED")
return true;
else
return false;
}.property('object.type')
});
or simpler:
App.CustomComponentComponent = Ember.Component.extend({
show_details: function() {
return this.get('object').get('type') === "AUTHORIZED";
}.property('object.type')
});
Don't forget to use get when accessing the properties of an Ember object.

Answer 2

Updated for Glimmer Components
In the newer Ember components (Glimmer), you can access the values passed to the components inside the component class from this.args. The guide here is very helpful.
Simple example from the guide
Before:
import Component from '#ember/component';
import { computed } from '#ember/object';
export default Component.extend({
width: 0,
height: 0,
aspectRatio: computed('width', 'height', function() {
return this.width / this.height;
})
});
{{!-- Usage --}}
<Image #width="1920" #height="1080" />
After:
import Component from '#glimmer/component';
export default class ImageComponent extends Component {
get aspectRatio() {
return this.args.width / this.args.height;
}
}
{{!-- Usage --}}
<Image #width="1920" #height="1080" />