Remove elements/components from DOM instead of CSS-hiding

[netmikey]

fxHide and fxShow hide elements via CSS display: none. While CSS-hiding is OK for simple HTML elements, it seems suboptimal for cases where we want to replace a whole component tree with another depending on the display size. In those cases, I would prefer completely removing elements and components from the DOM instead of having them both in the DOM (plus having to maintain their state) and just hiding one of them via CSS.

The Wiki page at https://github.com/angular/flex-layout/wiki/Adaptive-Layouts mentions the following:

Developers can use the following directives to achieve some Adaptive UX goals:

• fxHide
• fxShow
• ngIf

That sounds like I could use ngIf together with FlexLayout breakpoint aliases to achieve what I want, but I can't seem to find an example of how to do that? Is it just not implemented yet? Or could you maybe add an example somewhere in the docs?

Alternatively: what about removing elements from the dom completely on fxHide so that it behaves like ngIf instead of using CSS?

[ThomasBurleson]

• *ngIf.<breakpoint alias>="" is not yet supported.
• [ngStyle.<alias>]="" is not yet supported.
• [ngClass.<alias>]="" is not yet supported.

The current solution solution for *ngIf is here:

import import {ObservableMediaService} from '@angular/flex-layout/media-query/observable-media-service';

@Component({
  selector : 'my-mobile-component',
  template : `
      <div *ngIf="media.isActive('xs')">
         This content is only shown on Mobile devices
      </div>
      <footer>
         Current state: {{ }}
      </footer>
  `
})
export class MyMobileComponent {
  public state = '';
  constructor( @Inject(ObservableMediaService) public media) {
    media.asObservable()
      .subscribe((change:MediaChange) => {
        this.state = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : ""
      });
  }
}

See #144 for details on above import

[ThomasBurleson]

Closing this since it as "not an issue".

• Other feature requests are available.
• Updated the WIKI: https://github.com/angular/flex-layout/wiki/Adaptive-Layouts

[netmikey]

Awesome, @ThomasBurleson, thanks for the update! :)

[damsorian]

I created a workaround to use with ngIf, you can have a Pipe that return a Observable<boolean> in order to use with the async pipe in the ngIf, like this:

<div *ngIf="['xs','sm'] | fxIf | async">
  This is only for xs and sm.
</div>

FxIf Pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { MediaChange, ObservableMedia } from '@angular/flex-layout';
import { Observable } from 'rxjs';

@Pipe({ name: 'fxIf' })
export class FxIfPipe implements PipeTransform {

  constructor(private media: ObservableMedia) {}

  transform(data: Array<'xs'|'sm'|'md'|'lg'>): Observable<boolean> {
    return this.media.asObservable().map((change: MediaChange) => {
      return data.indexOf(change.mqAlias) > -1;
    });
  }
}

This work for me, I hope it helps you.

[ThomasBurleson]

@damsorian - I think this might be a better solution/enhancement:

import { Component } from '@angular/core';

import { Observable } from 'rxjs';
import { ObservableMedia } from '@angular/flex-layout';

@Component({ 
    selector: 'my-view' 
    template: `
      <div *ngIf="mobile$ | async">
          This is only for xs and sm.
      </div>
    `
})
export class MyView {
  mobile$ : Observable<boolean>;

  constructor(media: ObservableMedia) {
  	this.mobile$ = media.asObservableFor(['xs','sm']);
  }

}

This ^ would use a new API observableFor(aliases:Array<string>) to emit true when the aliases activate and false otherwise. Then the standard *ngIf could be easily used with the async pipe.

[damsorian]

@ThomasBurleson - I like the observableFor! what do you think about to use it with a Pipe in order to avoid code repetition in each component? It would look like this:

<div *ngIf="['xs','sm'] | fxIf | async">This is only for xs and sm.</div>

@Pipe({ name: 'fxIf' })
export class FxIfPipe implements PipeTransform {

  constructor(private media: ObservableMedia) {}

  transform(data: Array<'xs'|'sm'|'md'|'lg'>): Observable<boolean> {
    return this.media.asObservableFor(data);
  }
}

[ThomasBurleson]

The pipe idea adds complexity. The angular motto: less is more.

…

On Sun, Oct 1, 2017, 2:18 PM Damsorian ***@***.***> wrote: @ThomasBurleson <https://github.com/thomasburleson> - I like the *observableFor*! what do you think about to use it with a Pipe in order to avoid code repetition in each component? It would look like this: <div *ngIf="['xs','sm'] | fxIf | async">This is only for xs and sm.</div> @pipe({ name: 'fxIf' })export class FxIfPipe implements PipeTransform { constructor(private media: ObservableMedia ) {} transform(data: Array<'xs'|'sm'|'md'|'lg'>): Observable<boolean> { return this.media.asObservableFor(data); } } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#142 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAM17b07bUcZ_M-4L7W-tyLTQDiQZkmDks5sn_OAgaJpZM4LwxHR> .

[damsorian]

I need to maintain several components with the logic to show and hide elements for mobile, tablet and desktop, some in the same component. And with a Pipe, I don't need to initialize the ObservableMedia and create several variables like $mobile $tablet $desktop in each component every time (imagine 20 components with that logic). For me is too much code repetition, and in my case, the Pipe means 'less is more', but also, I understand your approach, and in many cases is the most intuitive to do. 👍

[netmikey]

I agree with @damsorian : having to inject media into components and repeat the asObservableFor over and over again doesn't seem like the DRYest solution, especially in a highly responsive WebApp. Also, I like the idea of having this behavior right there in the markup and (for most simple cases) not split up into markup and component. I'd welcome it if its usage was as easy as fxHide and fxShow, and the pipe would certainly achieve this.

From a usability standpoint, *ngIf.<breakpoint alias>="" would seem like the easiest and most readable solution (though I know Angular doesn't want us to implement specialized ngIfs...).

[ThomasBurleson]

Oh I like this ^ idea! PR anyone?

…

On Fri, Oct 6, 2017, 12:17 AM Mike Meessen ***@***.***> wrote: I agree with @damsorian <https://github.com/damsorian> : having to inject media into components and repeat the asObservableFor over and over again doesn't seem like the DRYest solution, especially in a highly responsive WebApp. Also, I like the idea of having this behavior right there in the markup and (for most simple cases) not split up into markup and component. I'd welcome it if its usage was as easy as fxHide and fxShow, and the pipe would certainly achieve this. From a usability standpoint, *ngIf.<breakpoint alias>="" would seem the easiest and most readable solution (though I know Angular doesn't want us to implement specialized ngIfs...). — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#142 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAM17f-NCGfLggtAouo7EUxF70AHbPBYks5spdQcgaJpZM4LwxHR> .