I used to be able to create a grid with line break in angular flex-layout using fxLayoutWrap.
Seems that it doesn't work anymore. Whatever number I put in fxFlex, the div doesn't go to the next line. I saw the example Angular flex-layout with ngFor, but I can't make it work on my side.
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap="wrap">
<div
fxFlex.gt-xs="50%"
[fxFlex.gt-md]="regularDistribution"
*ngFor="let country of countries">{{ country }}
</div>
</div>
I downgraded "#angular/flex-layout": "2.0.0-beta.10-4905443",
in package.json and it's working again...
Related
I'm trying to use dataview component from primeng, I've imported the module successfully, installed primeflex and read the documentation but when i try to use the grid layout it doesn't work and only shows the items in a vertical line,
I've tried to solve the problem using chrome inspect tool and tried to update the styles from the component CSS file but it didn't work also,
I've checked whether this CSS file is accessible or not and it has no problem at this point the problem is that when i try to give the .grid class a flex display for example it doesn't affect the view at all
this is the html code
<div class="container" *ngIf="topProducts != null">
<div>
<p-dataView #dv [value]="topProducts" layout="grid" class="p-dataview">
<ng-template let-prod pTemplate="gridItem">
<div class="col-12 md:col-4" style="width: fit-content;">
<app-product [product]="prod"></app-product>
</div>
</ng-template>
</p-dataView>
</div>
</div>
I think the problem related to primeflex ,when I installed it using npm i primflex it was installed successfully but didn't affect the dataview module at all
I'm using primeng 15.2.0
and primeflex 3.3.0
So, in my angular project Im using fxFlex in many places. I imported fxFlex in the module but in one place it is not working and I dont know why. This is my template code:
<div fxLayout="row" *ngIf="elementDescription$ | async as root">
<div fxFlex="20%" *ngFor="let page of root.elements; index as i" >
<app-card [elementDescription]="page" [index]="i" ></app-card>
</div>
</div>
Am I missing here something? I am using NG Bootstrap in my project if thats relevant
I develop a small angular material application. My objective is to obtain the following design for a card, that fit on every kind of media (desktop, mobile, tablette)
my "app.component.html" is the following
<mat-toolbar color="primary">
<div style="width:100%;" class="md-toolbar-tools" >
Liste des annonces
<span flex></span>
</div>
</mat-toolbar>
<div fxLayout="row">
<div fxFlex="20%"></div>
<div fxFlex="60%">
<mat-card *ngFor="let annonce of annonces; let i = index" style="border:red">
<mat-card-content style="border:blue">
<img src="./../assets/image/image{{i+1}}.jpg" alt="Avatar" style="position:absolute;top:0px;left:0px;width:40%;height:100%">
<div class="container" style="left: 45%; top:10px;">
<div style="left:70%;">{{annonce.dateConstruction | date:'dd MMMM yyyy'}}</div>
<div>
<span>{{annonce.type}}</span>
<span style="float:right">{{annonce.prix}}</span>
</div>
<h4>{{annonce.surface}}</h4>
<h4>{{annonce.adresse}}</h4>
<div style="left:45%;">
<p>{{annonce.description}}</p>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div fxFlex="20%"></div>
</div>
<router-outlet></router-outlet>
I am terrible in placing elements and text in html pages, and therefore in a material card. I obtain the following output in the browser
Furthermore when I shrink my browser, I can't see the element and text on the rigth of the image placed correctly. I tried to reproduce the same on stackblitz (https://stackblitz.com/edit/angular-pexq15?file=package.json), but I got trouble with the angular material tags that are not taken in account.
So could you help me and tell me what is going wrong and comment the correct code so I improve myself in html/css. Thanks a lot
You should try leveraging the #angular/flex-layout Library for this. Additionally, you should consider moving your styles to your CSS File, since this will make your HTML File a lot cleaner and the styles more reusable. In your stackblitz you missed to include the styles for #angular/material in your SCSS File and you did not import the #angular/flex-layout module, which is why your stylings were messed up.
I tried to fix your example on Stackblitz. To get the desired spacings for your text, simply add paddings or margins to the left of those elements. Also beware of your image: You have to add a fitting height property, or it will become cropped/stretched.
I have seen this answer but it answers for jquery and not angular/typescript.
My question is similar to this question, but my question is seeking a solution for angular.
How can I remove wrapper (parent element) without removing the child in Angular using typescript or scss? (If it is possible by both kindly show both methods).
For example how to programatically manupulate the dom below from
<div class="wrapper">
<span>This is It!</span>
</div>
<div class="button">Remove wrapper</div>
to: (After clicking on the button I would like to have the dom iook like below)
<span>This is It!</span>
<div class="button">Remove wrapper</div>
EDIT:
Kindly also show how to set it so that it can add the wrapper div back when I click the button again. Basically toggling the wrapper div.
I think you can simulate using ng-template and two divs, some like
<div *ngIf="toogle" class="wrapper">
<ng-content *ngTemplateOutlet="template"></ng-content>
</div>
<ng-content *ngTemplateOutlet="!toogle?template:null"></ng-content>
<ng-template #template>
<hello name="{{ name }}"></hello>
</ng-template>
<button (click)="toogle=!toogle">toogle</button>
See a example in stackblitz
I am new to angularjs and I want create one Page in which I want to add 2 ui-grid with one button called "other-grid" first time it must Load 1st grid and when we click again then 1st grid must replace with 2nd grid But some Problems are there I want to use ng-show and ng-hide it works for first grid but not loading 2nd grid Properly Why So and Any Solution Please..
You are probably better off using ng-if when dealing with ui-grid.
As for ng-show, it does weird things when rendering ui-grids (refer to: https://github.com/angular-ui/ui-grid/issues/4559)
Here is plunker of 2 grids with a toogle button:
http://plnkr.co/edit/IGF6X7SqtFdFSk8jiory?p=preview
<button ng-click="toggleuigrid()">toggle grid</button>
<div class="row">
<div class="span4" ng-if="show">
<div id="grid1" ui-grid="gridOptions1" class="grid" ></div>
</div>
<div class="span4" ng-if="!show">
<div id="grid2" ui-grid="gridOptions2" class="grid" ></div>
</div>
</div>
Make sure you give the 'other' hidden grid proper height and width so that the framework knows the grid dimensions
You can try using ng-if, ng-show, ng-hide and make the other grid visible when you click on the button - 'other grid'
Here is the official UI grid tutorial which does something similar to what you want