How to use component's insideHTML in the component template?

Question

I'm trying to learn about components. I have a component like this:

app.component('modal', {
    templateUrl: 'components/modal.html',
    bindings: {
        show: '<',
        title: '@',
    },
    controller: function () {}
});

This is how I use it:

<modal show="true" title="Create Campaign">Testing.</modal>

The component's content is: Testing.

And the template:

<div class="modal" ng-show="{{ $ctrl.show }}">
    <div class="modal__body">
        <div class="modal__header">
            {{ $ctrl.title }}
            <i class="fa fa-fw fa-close modal__close" data-action="close"></i>
        </div>
        <div class="modal__content"></div>

        <div class="modal__footer">
            <button class="button button--default button--ghost" data-action="close">Cancel</button>
            <button ng-disabled="!modal.createCampaign.name" class="button button--primary button--wide pull-right"
                type="submit">Create Campaign</button>
        </div>
    </div>
</div>

How I put the component's innerHTML (Testing.) to the inside of .modal__content div?

Maybe ıt can be something like:

<div class="modal__content">{{ $ctrl.body }}</div>

Answer 1

Use transclude option:

app.component('modal', {
    transclude: true,
    templateUrl: 'components/modal.html',
    bindings: {
        show: '<',
        title: '@',
    },
    controller: function () {}
});

In html add ng-transclude where you want the content to be added:

<div class="modal__content" ng-transclude></div>

Read more here: https://docs.angularjs.org/guide/component