Creating a custom structural directive

Question

I started learning Angular2 and the latest angular4 a week ago, and now I need to create a custom structured directive that shows what's inside it.

Explanation: I have an array element of a pair of strings, let me call the first element of n elements of the array header, and the second description is the result of https://ibb.co/i23Dxa

(the array comes from the backend, I mimic it through the mock array file)

Now, if I name the structural directive that I need to create, I want it to show what I will write under this call

Example:

<ng-template aulos-configuration-item-toolbar>
    <button (click)="click()">just click</button>
</ng-template>

this should only display the button that I wrote between the tags, for now I have this:

import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";

@Directive({ 
    selector: "[aulos-configuration-item-toolbar]",

})

export class AulosConfigurationItemToolbar {
    public templateRef: TemplateRef<any>;

    constructor(templateRef: TemplateRef<any>) {
        this.templateRef = templateRef;
    }
}

Can someone explain to me how to proceed? Many thanks.

Answer 1

...

export class GridOptionsComponent { }
@Directive({ selector: 'grid-options' })

@Component({
    selector: 'my-grid',
    moduleId: module.id,
    templateUrl: './grid.component.html'
})
export class GridComponent {
    ....
    ....
}

grid.component.html

 <div class="col-md-3">
    <div> some more html elements, components </div>

    <ng-content select="grid-options"></ng-content>
 </div>

<my-grid>
   <grid-options>
        <button >Add</button>
        <button >View</button>
   </grid-options>
</my-grid>