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

Question

I am quite new to Angular 2. I would like to create a custom structural directive that wrap the template in set of html elements. For example using *formField in below template:

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

should result as show below:

<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>

So what have you tried, and what precisely is the problem with it? Have you read [the docs](https://angular.io/docs/ts/latest/guide/structural-directives.html)? — jonrsharpe, Feb 05 '17 at 18:08
I already had a look at it. The issue is following: I can get the reference of — Muhammad Aamir, Feb 08 '17 at 17:29
I too have pretty much the exact same question. I've read the documentation on structural directives and they aren't helpful in the least. If I figure it out, I'll try to remember to post an answer. — Vale H, May 01 '17 at 14:36
Possible duplicate of [Building a wrapper directive (wrap some content / component) in angular2](https://stackoverflow.com/questions/41165448/building-a-wrapper-directive-wrap-some-content-component-in-angular2) — Dan Field, Aug 18 '17 at 02:39

score 0 · Answer 1 · answered Jan 10 '18 at 17:38

I would use a component. Seems fitting for what you are trying to accomplish. Directives should be used to manipulate an element's behavior, but you're not doing that. You're only trying to wrap that element with other elements, but not manipulate the element itself.

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

1 Answers1