Flex-layout: Utilizing the Responsive API to manage container height

Created on 4 Jan 2017 · 8Comments · Source: angular/flex-layout

Is there a way to use the responsive API to set the height of a container?
At the moment I manage the height of the container like this:

section {
  height: 680px;
  @include xs {
    height: 100vh;
  }
}

<section id="s1" fxLayoutAlign="center">
  <img src="../assets/logo.svg" alt="Logo">
</section>

Source

cschroeter

👍1

Most helpful comment

@cschroeter - you could also do it this way:

<section [ngStyle]="{'height':  media.isActive('xs') ? '100vh' : '680px' }">
</section>

export class MyComponentWithSections {
  constructor(@Inject(MatchMediaObservable) private media) { }  
}

ThomasBurleson on 4 Jan 2017

👍3

All 8 comments

@cschroeter - At the moment, the only thing you can do is use the * MatchMediaObservable* to subscribe to the breakpoint activations and then set a class dynamically.

See:

<section [ngStyle]="{'height': sectionHeight}">
</section>

export class MyComponentWithSections {
  private _watcher : Subscription;
  public sectionHeight = "680px";

  constructor(@Inject(MatchMediaObservable) private _media$) {
    // Watch for breakpoint activations
    this._watcher = this._media$
        .subscribe((e:MediaChange) => {
            this.sectionHeight = (e.mqAlias == 'xs') ? "100vh" : "680px";
        });
  })

  ngOnDestroy() {
    this._watcher.unsubscribe();
  }

}

ThomasBurleson on 4 Jan 2017

🎉1

@cschroeter - you could also do it this way:

<section [ngStyle]="{'height':  media.isActive('xs') ? '100vh' : '680px' }">
</section>

export class MyComponentWithSections {
  constructor(@Inject(MatchMediaObservable) private media) { }  
}

ThomasBurleson on 4 Jan 2017

👍3

Thank you @ThomasBurleson

cschroeter on 5 Jan 2017

Hi
Can you please tell me in what build I can use your solution?
I have "@angular/material": "2.0.0-beta.1" and it looks like your solution doesn't work there.
Thank you!