angular-flex-layout

Flex layout used in mat-drawer-content

由 ε祈祈猫儿з 提交于 2019-12-11 14:54:42
问题 I have used angular flex layout in navigation drawer like this <mat-drawer-container> <mat-drawer #drawer mode="over" > <p>Drawer content</p> <p> <button mat-icon-button (click)="drawer.close()"> <mat-icon>clear</mat-icon> </button> </p> </mat-drawer> <mat-drawer-content fxLayout="row" fxLayoutAlign="start center"> <p> <button mat-icon-button (click)="drawer.open()"> <mat-icon>menu</mat-icon> </button> </p> <router-outlet></router-outlet> </mat-drawer-content> </mat-drawer-container> but it

Unable to hide the navigation bar in login page when redirecting from home page to login page

由 ↘锁芯ラ 提交于 2019-12-11 14:42:18
问题 I am trying to implement a sample app in Angular using Angular Material and Angular Flex Layout . I have implemented a navigation bar which is hidden in login page and visible in all pages in the appllication. I have created a service with the name showmenu.service.ts where I have declared two variable and assigned them as boolean.. I am able to hide the navigation bar in my login page as start my application. But as I login in to the application, I am getting the following error in my

Use ngFor items to display another item before the first element

由 筅森魡賤 提交于 2019-12-11 04:23:23
问题 I would like to display an array using ngFor but before the first element I want to display a card (the user can click inside to show a modal) Here the code : <div fxFlex="25" *ngFor="let product of products; let i = index"> <div *ngIf="i == 0"> <mat-card (click)="addProduct()" class="mat-card-add-button"> <div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%"> <span style="font-size:32px;text-align:center">+<br />Add product</span> </div> </mat-card> </div> <div fxLayoutAlign=

Angular Error: No provider for ObservableMedia

由 為{幸葍}努か 提交于 2019-12-10 14:09:08
问题 I am trying to user ObservableMedia. Application compiles successfully but in browser console i see this error ERROR Error: No provider for ObservableMedia! at injectionError (core.es5.js:1169) at noProviderError (core.es5.js:1207) Here is my my code import { Component , OnInit, ViewChild} from '@angular/core'; import {Observable} from 'rxjs/Rx'; import {MediaChange, ObservableMedia} from "@angular/flex-layout"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls

Change the layout or cols value of md-grid-list based on screen size

由 ▼魔方 西西 提交于 2019-12-07 16:14:13
问题 I am using Grid List of angular material 2. Here is the plunker https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview Here I have defined a grid list of three columns and there are three tiles (showing in a row as defined as three columns). I want to change the layout direction of tiles like if the screen size gets shrunk at a certain point then all the tiles should be in column one below the other that is somehow value of cols parameter changed to 1. How is it possible? Is it possible with

How to use flex layout along with md-card in the grid in angular 2?

由 99封情书 提交于 2019-12-06 14:43:55
I am using "@angular/core": "2.4.10" and "@angular/material": "2.0.0-beta.2". I have installed flex-layout using npm. I want to design responsive grid with cards. I am using md-grid-list and md-card. How do I use flex layout with md-card or md-grid-list. The grid and the card should be responsive according to the window/screen size. Expected result: As soon as I decrease the screen size, the number of columns should be reduced and when the screen size is big the number of columns should increase without overlapping the contents in the card. user2301 Here is the sample code which might be

Angular Material tab height

由 怎甘沉沦 提交于 2019-12-05 03:24:05
I am trying to have a full page Angular Material tab which has tabs which are full height and have a centered message. I have created this stakblitz as I can't get it to work. The fxFill's don't seem to Fill and I am not sure if this is an issue with the Flexbox layout or Angular Material. I don't want to force a height as within each tab as that seems to defeat the point of flexible layouts. Am sure its simple but help a poor confused developer who is used to Bootstrap grid :) UPDATE Adding height: calc(100vh - 100px); to the parent div and then also to the tall.component div makes things

Shrinkable mat-toolbar

由 ↘锁芯ラ 提交于 2019-12-03 13:31:41
问题 I used the example provided here to set up a responsive navbar https://theinfogrid.com/tech/developers/angular/responsive-navbar-angular-flex-layout/ and my code looks pretty similar <div style="height: 85vh;"> <mat-toolbar color="primary" mat-scroll-shrink> <span>{{title}}</span> <span class="example-spacer"></span> <div fxShow="true" fxHide.lt-md="true"> <!-- The following menu items will be hidden on both SM and XS screen sizes --> <a href="#" mat-button>Home</a> <a href="#" mat-button

Shrinkable mat-toolbar

由 拟墨画扇 提交于 2019-12-03 03:27:52
I used the example provided here to set up a responsive navbar https://theinfogrid.com/tech/developers/angular/responsive-navbar-angular-flex-layout/ and my code looks pretty similar <div style="height: 85vh;"> <mat-toolbar color="primary" mat-scroll-shrink> <span>{{title}}</span> <span class="example-spacer"></span> <div fxShow="true" fxHide.lt-md="true"> <!-- The following menu items will be hidden on both SM and XS screen sizes --> <a href="#" mat-button>Home</a> <a href="#" mat-button>About</a> <a href="#" mat-button>Services</a> <a href="#" mat-button>Portfolio</a> <a href="#" mat-button

Remove padding from fxLayoutGap last element of row

由 爷，独闯天下 提交于 2019-12-02 00:36:20
I have a problem using fxLayoutGap. The last column of my list has a padding and I don't want it. How to keep fxLayoutGap (space between cards) and remove the padding from the last column ? Thank ! <div fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid" style="margin-right:-20px;"> <div fxHide.lt-sm="true" fxFlex="calc(25%-20px)" fxFlex.md="33"> <div fxFlexFill fxLayoutAlign="center center"> <mat-card (click)="addAdvert()" class="mat-card-add-button"> <div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%"> <span style="font-size:32px;text
订阅 angular-flex-layout