Angularjs templates: How to conditionally wrap a tag in another tag

Question

ngIf conditionally adds/removes a tag to the DOM.

But if I want to conditionally wrap one tag (eg content) in another (eg layout) what is the most angular way to do this?

Below is how I would do it in Handlebars

{{#if layout}} <div class="layout"> {{/if}}
    Content is always here, it is wrapped only if layout is specified
{{#if layout}} </div> {{/if}}

Answer 1

I may not fully understand your end goal here, but it seems like it'd be invalid html .

Regardless, your best options would be to write a directive that builds your html for you.

If you're not comfortable with custom directives, then the easier implement would be ngSwitch. It would let you set one way as the default, then you'll switch to the other one based on the expression that determines whether layout is to be wrapped or not.

Only thing I don't like about using ngSwitch in this type of case, it requires duplicating a bit of code. In this case it's very minimal.

If you have to do this throughout your application a few times, it'd be worth writing your own directive to do it in my opinion.