move ng-content based on screen size

Question

I am using bootstrap and angular, and making a component that contain a menu.

If the screen is large, I want him to be in the navbar, but if the screen is small, I want it to be in a dropdown.

I currently have this :

<div class="d-flex justify-content-between flex-md-nowrap align-items-center">
  <div class="col-5 col-md-2 p-0 p-md-auto">
    <span class="h4 my-0 mx-2 align-middle">{{ title }}</span>
  </div>
  <div class="col-7 col-md-10 float-right">

    <!-- DEFAULT VIEW -->
    <ng-content></ng-content>

    <!-- SMALL VIEW -->
    <div ngbDropdown class="d-md-none d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <ng-content></ng-content>
      </div>
    </div>
  </div>
</div>

The problem is, ng-content only appear one time, and it's in the dropdown. Is there a way to make it appear in both case, or to toggle it ?

I was thinking to toggle a boolean when the default view become displayed none/block

EDIT : I Tried this, but it also don't work.

  <div class="col-7 col-md-10 float-right">
    <div #default class="d-none d-md-block">
      <div *ngIf="default.offsetWidth > 0">
        <ng-content></ng-content>
      </div>
    </div>

    <div ngbDropdown class="d-md-none d-block">
      <button class="btn btn-outline-primary float-right" id="filters" ngbDropdownToggle>
        {{ 'BUTTON.FILTER' | translate }}
      </button>
      <div ngbDropdownMenu aria-labelledby="filters">
        <div *ngIf="default.offsetWidth === 0">
          <ng-content></ng-content>
        </div>
      </div>
    </div>
  </div>

please don't forget to accept the answer https://stackoverflow.com/help/accepted-answer — IAfanasov, Jun 08 '20 at 05:34

score 1 · Answer 1 · answered May 15 '20 at 10:14

1

Dup of https://stackoverflow.com/a/44699654/390161

You can wrap ng-content in ng-template and use ngTemplateOutlet

<a class="bouton" href="{{ href }}" *ngIf="hasURL">
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
</a>

<button class="bouton" *ngIf="!hasURL">
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container> 
</button>
<ng-template #contentTpl><ng-content></ng-content></ng-template>

answered May 15 '20 at 10:14

IAfanasov

4,775
3
27
42

1

yeah I ended up doing like this. I am not a big fan but it works – Bobby May 18 '20 at 02:59
I think the best solution would not require any logic except for CSS media queries. I can not imagine how to align it with angular directives – IAfanasov May 18 '20 at 07:25

move ng-content based on screen size

1 Answers1