How to create a custom directive that will wrap a template in other elements (Angular 2)?

Question

I'm new to Angular 2. I would like to create a custom structured directive that wraps a template in a set of html elements. For example, using * formField in the following template:

<input *formField type='text' formControlName="firstName" class='form-control' id='firstName' placeholder='First Name' />

should look like this:

<div class='form-group'>
    <label for='firstName' class='col-sm-2 control-label'>First Name</label>
    <div class='col-sm-7'>
        <input type='text' formControlName="firstName" class='form-control' id='firstName' placeholder='First Name' />
    </div>
</div>

Answer 1

I would use a component. Seems appropriate for what you are trying to accomplish. Directives should be used to control the behavior of elements, but you do not. You are only trying to wrap this element with other elements, but you are not manipulating the element itself.