angular-flex-layout

问题 I am trying to implement a sample app in Angular using Angular Material and Angular Flex Layout . I have implemented a navigation bar which i want to hide in login page and visible in all pages in the application. I have created a service with the name showmenu.service.ts where I have declared a variable and assigned as boolean value. Also defined two functions show() and hide() I am not getting any error, but I am unable to hide the navigation bar in my login page . Please access my sample

问题 I am creating one application which has multiple components using parent child relationship in angular 5. Inside my main app.component.html I have this structure. <app-layout-header></app-layout-header> <app-layout-view></app-layout-view> <app-layout-add></app-layout-add> <router-outlet></router-outlet> <app-layout-footer></app-layout-footer> where this directive "app-layout-header" is responsible for loading side-navigation and top-navigation like this. Now this directive "app-layout-view"

问题 I am currently using Angular 5 that runs a loop and displays several containers as a list (Thousands of results). <div class="temp-list"> <div> <ng-container #activityCards *ngFor="let activity of (activityCollection.activities | filters: filtersObject); let i = index;"> <div class="activity-card-container" *ngIf="checkIsVisible(i)" [ngClass.gt-md]="{'display-inline': true, 'large-activity': i < 3, 'medium-activity': i > 2 && i < 7, 'small-activity': i > 6 }" > <activity-card [activity]=

问题 I am currently using Angular 5 that runs a loop and displays several containers as a list (Thousands of results). <div class="temp-list"> <div> <ng-container #activityCards *ngFor="let activity of (activityCollection.activities | filters: filtersObject); let i = index;"> <div class="activity-card-container" *ngIf="checkIsVisible(i)" [ngClass.gt-md]="{'display-inline': true, 'large-activity': i < 3, 'medium-activity': i > 2 && i < 7, 'small-activity': i > 6 }" > <activity-card [activity]=

问题 I am working with Angular 2 app using angular material and angular flex layout.I have created in my application a login form and a header which is only visible after login in my home page. In my app.component.html I have added my header and applied the below style to get it fixed while scrolling. <div style="margin-bottom:5px; top: 0; position: sticky; z-index: 1; background-color: inherit;"> In my home page I have added a mat-toolbar component, mat-card component and mat-sidenav component.

问题 Using fxLayoutGap and wrap leaves an annoying margin at the end of each row that is wrapped. Is there a way to fix this? https://stackblitz.com/edit/angular-fxlayoutgap-calc-mralnz?file=app%2Fapp.component.html <div fxLayout="row wrap" fxLayoutGap="25px"> <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)"> <input matInput placeholder="Name"> </mat-form-field> <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)"> <input matInput placeholder="Occupation"> </mat

问题 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

问题 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

问题 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

问题 I've created a simple login component and I'd like to vertically center, but I'm not sure how to achieve this using the Angular Flex Layout library. app.component.html <router-outlet></router-outlet> login.component.html <div fxLayout fxLayoutAlign="center center"> <mat-card fxFlex="30%"> <mat-card-title>Login</mat-card-title> <mat-card-content fxLayout="column"> <mat-form-field> <input matInput placeholder="Username"> </mat-form-field> <mat-form-field> <input matInput placeholder="Password">