How to transfer an object to an component in ember.js

Ember.js is completely new to me. (Current version 5.4)
I would like to build a small WebUI. The login and the menu navigation work great. But I have problems with the loop and visualizing information from the single loop in the component.

I have a "main-axis" component. I make an each loop in this template. Now I want to install a component in each loop and enter various information from the object in the template of this component. Titles, values etc.

main-axis.hbs

<div class="row">
 
    <div class="col-12 col-lg-6">
      <LinearAxis />
    </div>
 
</div>

main-axis.js

import Component from "@glimmer/component";

export default class MainAxis extends Component {
  exampleArray = [
        {title: 'foo', id:7},
        {title: 'bar', id:42}
    ];
}

example template "linear-axis.hbs"

<div class="card">
  <div class="card-header">
    Axis 
  </div>
  <div class="card-body">
    <p class="card-text">Number: </p>
    <button type="button" class="btn btn-primary btn-sm">Click</button>
  </div>
</div>

the empty js class inside app/components "linear-axis.js

import Component from '@glimmer/component';

export default class LinearAxis extends Component {
// how i get informations from the loop and provide them into the individual template instance
}

I have spent a lot of time with the documentation of Ember.js and am not really getting any further.