diff --git a/src/lib/extended/show-hide/hide.spec.ts b/src/lib/extended/show-hide/hide.spec.ts index cd91aaabb..4b3ff2fbe 100644 --- a/src/lib/extended/show-hide/hide.spec.ts +++ b/src/lib/extended/show-hide/hide.spec.ts @@ -10,7 +10,6 @@ import {CommonModule} from '@angular/common'; import {ComponentFixture, TestBed, inject} from '@angular/core/testing'; import { MatchMedia, - CoreModule, MockMatchMedia, MockMatchMediaProvider, MediaObserver, @@ -22,7 +21,7 @@ import {customMatchers, expect, NgMatchers} from '../../utils/testing/custom-mat import { makeCreateTestComponent, expectNativeEl, queryFor } from '../../utils/testing/helpers'; -import {DefaultShowHideDirective} from './show-hide'; +import {FlexLayoutModule} from '../../module'; describe('hide directive', () => { @@ -59,8 +58,8 @@ describe('hide directive', () => { // Configure testbed to prepare services TestBed.configureTestingModule({ - imports: [CommonModule, CoreModule], - declarations: [TestHideComponent, DefaultShowHideDirective], + imports: [CommonModule, FlexLayoutModule], + declarations: [TestHideComponent], providers: [ MockMatchMediaProvider, {provide: SERVER_TOKEN, useValue: true}, @@ -111,7 +110,12 @@ describe('hide directive', () => { expectNativeEl(fixture, {isHidden: false}).not.toHaveStyle({'display': 'none'}, styler); }); - + it('should use "flex" display style when the element also has an fxLayoutAlign', () => { + createTestComponent(`
`); + expectNativeEl(fixture).not.toHaveStyle({'display': 'none'}, styler); + matchMedia.activate('xs'); + expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler); + }); }); describe('with responsive features', () => { @@ -257,6 +261,22 @@ describe('hide directive', () => { expectNativeEl(fixture).toHaveStyle({'display': 'inline-block'}, styler); }); + it('should support fxHide and fxLayout', () => { + createTestComponent(` +
+ This content to be shown ONLY when gt-sm +
+ `); + matchMedia.activate('xs'); + expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler); + + matchMedia.activate('sm'); + expectNativeEl(fixture).not.toHaveStyle({'display': 'none'}, styler); + + matchMedia.activate('xs'); + expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler); + }); + }); diff --git a/src/lib/extended/show-hide/show-hide.ts b/src/lib/extended/show-hide/show-hide.ts index b13d87490..b9c9560f6 100644 --- a/src/lib/extended/show-hide/show-hide.ts +++ b/src/lib/extended/show-hide/show-hide.ts @@ -67,7 +67,10 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit, this.hasLayout = this.marshal.hasValue(this.nativeElement, 'layout'); this.marshal.trackValue(this.nativeElement, 'layout') .pipe(takeUntil(this.destroySubject)) - .subscribe(this.updateWithValue.bind(this)); + .subscribe(this.triggerUpdate.bind(this)); + this.marshal.trackValue(this.nativeElement, 'layout-align') + .pipe(takeUntil(this.destroySubject)) + .subscribe(this.triggerUpdate.bind(this)); const children = Array.from(this.nativeElement.children); for (let i = 0; i < children.length; i++) {