angular-flex-layout

问题 I have use Angular Material table, i have bind data source from ts file,but all the data is loaded on very first page, pagination is not working.I have two more table, which are on same page,same problem for other tables too. I have tried setTimeout(() => this.dataSource.paginator = this.paginator); and ngAfterViewInit() { this.dataSource.paginator = this.paginator } HTML: <mat-table class="mt-4 table-container" fxFlex="100" [dataSource]="allUsers"> <ng-container matColumnDef="checked"> <mat

问题 I am working on mat-stepper with usage of flex-layout. Every step contains and icon and a paragraph to make it responsible and more readable I want to hide paragraph on smaller screens and leave only icon. Per my understanding fxHide.lt-sm should hide element if the resolution is lower than small but unfortunately nothing happens and it looks like this: Image of stepper (Galaxy S5 size) Here is the code: <mat-horizontal-stepper> <mat-step> <ng-template matStepLabel> <ul> <li> <mat-icon>format

问题 I am working on mat-stepper with usage of flex-layout. Every step contains and icon and a paragraph to make it responsible and more readable I want to hide paragraph on smaller screens and leave only icon. Per my understanding fxHide.lt-sm should hide element if the resolution is lower than small but unfortunately nothing happens and it looks like this: Image of stepper (Galaxy S5 size) Here is the code: <mat-horizontal-stepper> <mat-step> <ng-template matStepLabel> <ul> <li> <mat-icon>format

问题 I have two columns as below and I wanted to dynamically swap/change fxFlex value onClick of a button. I know that if you resize screen, fxFlex.md/lg etc will kick-in which I was able to accomplish. But am trying to understand how to change the fxFlex values on a static screen-size on some event like button-click. <div flexLayout="row"> <div fxFlex="fxFlexForCol1" style="background-color: green"> <button mat-raised-button (click)="swapViewableArea()">Click to enlarge view {{fxFlexForCol1}}<

问题 I have a problem on the responsiveness of using modals in Angular Material. How can i make it look good on small screens. It doesn't have to be mat-grid Pls see this stackblitz link Click Here openDialog() { const dialogRef = this.dialog.open(ModalComponent, { width: "650px", height: "380px" }); } 回答1: DemoYou can use media query in style.css @media only screen and (max-width: 700px) { .modal .mat-grid-tile { width:100% !important; position:relative!important; left:0 !important; } .modal .mat

问题 I have a problem on the responsiveness of using modals in Angular Material. How can i make it look good on small screens. It doesn't have to be mat-grid Pls see this stackblitz link Click Here openDialog() { const dialogRef = this.dialog.open(ModalComponent, { width: "650px", height: "380px" }); } 回答1: DemoYou can use media query in style.css @media only screen and (max-width: 700px) { .modal .mat-grid-tile { width:100% !important; position:relative!important; left:0 !important; } .modal .mat

问题 I'm trying to add flex-layout to an angular app, but when I do and try to use it the app breaks. I've installed npm i @angular/flex-layout @angular/cdk then imported in app.module.ts import { FlexLayoutModule } from '@angular/flex-layout'; import [ FlexLayoutModule ] I've also upgraded typescript to the latest npm i typescript@latest But when the app tries to compile, I get all kinds of errors: ERROR in node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:24:19 - error TS1086: An

问题 I have implemented a simple angular material table using flexbox css. In the desktop my table view is as shown below. In md screen size the view is In xs screen size its view is When i see the table in XS screen view ,the spacing between the table columns is not properly adjusted.. Is there a way out where i can add a horizontal scroll to space the table columns properly by specifying a min width to my table and adding a horizontal scroll when in XS and SM screen sizes. Below shown is my

问题 I have implemented a simple angular material table using flexbox css. In the desktop my table view is as shown below. In md screen size the view is In xs screen size its view is When i see the table in XS screen view ,the spacing between the table columns is not properly adjusted.. Is there a way out where i can add a horizontal scroll to space the table columns properly by specifying a min width to my table and adding a horizontal scroll when in XS and SM screen sizes. Below shown is my

问题 I am using Angular material 2 for angular 4 application along with angular flex layout. Below is the simple form <div fxLayoutGap="5px" fxLayout="column"> <mat-form-field class="full-width"> <input matInput placeholder="Email Id" type="text" [(ngModel)]="emailId"> </mat-form-field> <mat-form-field class="full-width"> <input matInput placeholder="Password" type="password" [(ngModel)]="password"> </mat-form-field> <mat-form-field class="full-width"> <input matInput placeholder="Confirm Password