Creating a custom structural directive

I've started learning Angular2 and the newest angular4 a week ago, and now I need to create a custom structural directive that shows what is inside it.

Explanation: I have an element of an array of a pair of string let's call the first element of the n elements of the array title and the second description this is the result https://ibb.co/i23Dxa

(the array comes from a backend, I'm simulating it through a mock array file)

Now, if I call the structural directive that I need to create, I want that it shows what I'll write under that call

example:

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

this should only render the button that I wrote in 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;
    }
}

Could someone explain me better the way to proceed? Thanks a lot.