Angular.js: Feature: hide element if ng-transclude-slot not filled

[yasinkocak]

Its seems logical when use ng-transclude-slot="string" and it's not filled to hide element. This will save me build a controller to do this.

[Narretz]

I don't know. If the element doesn't have content, it's generally "hidden" for most purposes (since it won't have dimensions, except when explicitly set). So I don't think that's a common requirement. Can you explain your use case a bit more?

[yasinkocak]

If i have PanelController and panel-footer is not filled. The styling and html of panel-footer is still exists.

export default <any>{
    transclude: {
        heading: '?panelHeading',
        body: 'panelBody',
        footer: '?panelFooter'
    },
    template: `
        <div class="panel panel-primary">
            <div class="panel-heading" ng-transclude-slot="heading"></div>
            <div class="panel-body" ng-transclude="body"></div>
            <div class="panel-footer" ng-transclude-slot="footer"></div>
        </div>
        `
};

[Narretz]

You can do this with css:

.footer:not(:empty) {
    height: 20px;
 }

[Narretz]

Or

.footer:empty {
  display: none;
}

This is available in all our supported browsers, so I'll say that this is an acceptable solution.

[itxds]

(2 years later)
Or you know... we could have had:

[ng-transclude]:empty {
  display: none;
}

:/