Utilizing the Responsive API to manage container height

[cschroeter]

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>

[ThomasBurleson]

@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:

• Using MatchMediaObservable
• Using ngStyle

<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]

@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) { }  
}

[cschroeter]

Thank you @ThomasBurleson

[dimabutenko]

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!

[maxime1992]

@dimabutenko it's not angular/material, you need flex-layout.

You can go to https://gitter.im/angular/flex-layout to get some more help about that :)

[dimabutenko]

@maxime1992 it's my mistake.
I have "@angular/flex-layout": "2.0.0-beta.1"

[maxime1992]

@dimabutenko I also have that version and it's working well.

You can find the project I'm working on here and the specific file where I'm using that here.

Maybe it might help you 👍

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}