angular 6: use the same html mark up twice within the same component

Question

See the sample code below... I want to use the same markup in 2 places in my angular component. How can i achieve that?

I know i can register a new component but that sounds like over kill.

<div class="mobile-aside" *ngIf="isMobile"><!-- aside template here --></div>
<div class="desktop-aside" *ngIf="!isMobile"><!-- aside template here --></div>

<ng-template #aside>
  <category-aside
    [categoryData]="categoryData"
    [currentParams]="queryParams"
    (filter)="onFilter($event)"
    (changepage)="onPage($event)"
    (sort)="onSort($event)"
    (sortdir)="sortDir($event)"
    (search)="onSearch($event)"
  ></category-aside>
</ng-template>

Answer 1

You can do this using along with ngTemplateOutlet directive as shown below.

<div class="mobile-aside" *ngIf="isMobile"><ng-container *ngTemplateOutlet="aside"></ng-container></div>
<div class="desktop-aside" *ngIf="!isMobile"><ng-container *ngTemplateOutlet="aside"></ng-container></div>

<ng-template #aside>
  <category-aside
    [categoryData]="categoryData"
    [currentParams]="queryParams"
    (filter)="onFilter($event)"
    (changepage)="onPage($event)"
    (sort)="onSort($event)"
    (sortdir)="sortDir($event)"
    (search)="onSearch($event)"
  ></category-aside>
</ng-template>