Ember use separate child template files

I have the below template file (actually used for my component)

{{#each details.sections as |section|}}
    <div class="row">
    {{#each section.fields as |field|}}
        // if field.id is 'abc', use abc.hbs
        // if field.id is 'xyz', use xyz.hbs
    {{/each}}
    </div>
{{/each}}

My question is how can I use separate sub-template files and include them in the above parent file (based on condition)

Thus if field.id is 'abc', it should use rendering logic from abc.hbs Also abc.hbs would need the 'field' model input for rendering purpose (It's output should get appended to the main template)