Angular use html template from a component inside another component

Question

I have two components. The first component is a table component --> selector: 'table-component'. This component implements a standard filtering on my table.

My second component is a component for a page that displays the table. I have multiple pages that use this table component by using the tag.

But some pages need some custom filtering. So how can I add custom filtering in the table component like this?

<table-component>
     <custom-filtering>
          <div>
               Here has to come the filtering stuff
          </div>
     </custom-filtering>
</table-component>

Answer 1

In your customFiltering directive you must add this

return {
    transclude: true,
    /* your code */
    ...
    ...
}

and then you need to add this to your template

<ng-transclude></ng-transclude>

This mean when you write custom html between tags

<custom-filtering>
    // html code here
</custom-filtering>

html code between tags will replaced where your

<ng-transclude></ng-transclude>

in your template..

Is that what you are looking for? Hope this help you

Other way to archive what you want is to extend your customFiltering directive and pass custom filter