Observes the created container for provided queries and notifies the consumer if a query is matching or not. Use the observe with a query to start monitoring. The queries have the same syntax as the browsers media queries (e.g.: (min-width: 300px)).

Note: Only min-width, max-width, min-height and max-height are supported.

<dt-container-breakpoint-observer>
  <p>This is some placeholder text</p>
  <button dt-button>Some button</button>
</dt-container-breakpoint-observer>

Experimental

Why is it experimental:

  • As this component heavily uses the Intersection Observer and some overlaying elements we do not have to rely on the browser's resize event and should therefor theoretically get much better performance. We still want to monitor the use-cases and performance figures before we fully introduce this feature.
  • This component just now has one method where you can monitor a media query. More directives and APIs are planed to make it easier to use it.
  • Proper UI testing is still missing.

Imports

You have to import the DtContainerBreakpointObserverModule when you want to use the <dt-container-breakpoint-observer>.

@NgModule({
  imports: [DtContainerBreakpointObserverModule],
})
class MyModule {}

Methods

Name Params Return type Description
observe string | string[] Observable<DtBreakpointState> Start observing the container with the provided media query/queries. The observable will provide you a DtBreakpointState object which tells you if all media queries are currently matching (or not) and which of the individual breakpoints are matching.

dtIfContainerBreakpoint directive

A structural directive, much like Angulars ngIf, that takes a container media query (or multiple) and whenever the breakpoint observer matches this query it renders the template provided in the then, or when false renders the template provided in an optional else clause.

Important notice: This directive needs a dt-container-breakpoint-observer to work, because it passes the provided query to the observer and evaluates every-time the observed query changes state.

Inputs

Name Type Description
dtIfContainerBreakpoint query: string | string[] The query to observe and evaluate as the condition for showing a template.
dtIfContainerBreakpointThen TemplateRef<DtIfContainerBreakpointContext> | null A template to show if the breakpoint does match.
dtIfContainerBreakpointElse TemplateRef<DtIfContainerBreakpointContext> | null A template to show if the breakpoint does not match.

Example: 

<dt-container-breakpoint-observer>
  <p>This element is alway visible</p>
  <p *dtIfContainerBreakpoint="'(min-width:400px)'">
    This element is only visible if the container has at least a width of 400px
  </p>
</dt-container-breakpoint-observer>

Using the then template: 

<dt-container-breakpoint-observer>
  <p>This element is alway visible</p>
  <p *dtIfContainerBreakpoint="'(min-width:400px)'; else elseBlock">
    This element is only visible if the container has at least a width of 400px
  </p>
  <ng-template #elseBlock>
    <p>This element is visible if the container is smaller than 400px</p>
  </ng-template>
</dt-container-breakpoint-observer>

Responsive Table

Using the breakpoint observer creating a responsive table got easier:

<dt-container-breakpoint-observer>
  <dt-table [dataSource]="dataSource">
    <ng-container dtColumnDef="host" dtColumnAlign="text">
      <dt-header-cell *dtHeaderCellDef>Host</dt-header-cell>
      <dt-cell *dtCellDef="let row">{{ row.host }}</dt-cell>
    </ng-container>
    <ng-container dtColumnDef="cpu" dtColumnAlign="text">
      <dt-header-cell *dtHeaderCellDef>CPU</dt-header-cell>
      <dt-cell *dtCellDef="let row">{{ row.cpu }}</dt-cell>
    </ng-container>
    <ng-container dtColumnDef="memory" dtColumnAlign="number">
      <dt-header-cell *dtHeaderCellDef>Memory</dt-header-cell>
      <dt-cell *dtCellDef="let row">{{ row.memory }}</dt-cell>
    </ng-container>
    <ng-container dtColumnDef="traffic" dtColumnAlign="control">
      <dt-header-cell *dtHeaderCellDef>Network traffic</dt-header-cell>
      <dt-cell *dtCellDef="let row">{{ row.traffic }}</dt-cell>
    </ng-container>
    <ng-container dtColumnDef="details" dtColumnAlign="text">
      <dt-header-cell *dtHeaderCellDef>Details</dt-header-cell>
      <dt-expandable-cell *dtCellDef></dt-expandable-cell>
    </ng-container>
    <dt-header-row *dtHeaderRowDef="_headerColumns"></dt-header-row>
    <dt-row
      *dtRowDef="
          let row;
          columns: ['host', 'cpu', 'memory', 'traffic'];
          let rowIndex = index;
          when: !_isTableNarrow
        "
    ></dt-row>
    <dt-expandable-row
      *dtRowDef="
          let row;
          columns: ['details', 'host', 'cpu'];
          let rowIndex = index;
          when: _isTableNarrow
        "
    >
      <ng-template dtExpandableRowContent>
        <dt-key-value-list>
          <dt-key-value-list-item>
            <dt-key-value-list-key>Memory</dt-key-value-list-key>
            <dt-key-value-list-value>{{ row.memory }}</dt-key-value-list-value>
          </dt-key-value-list-item>
          <dt-key-value-list-item>
            <dt-key-value-list-key>Traffic</dt-key-value-list-key>
            <dt-key-value-list-value>{{ row.traffic }}</dt-key-value-list-value>
          </dt-key-value-list-item>
        </dt-key-value-list>
      </ng-template>
    </dt-expandable-row>
  </dt-table>
</dt-container-breakpoint-observer>