I am trying to display a list of items in an Angular web app. I am having a list component which contains the related *ngFor directive to display each list-item component. Inside the HTML of the list-item component I defined the following structure:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="item">
<div class="content font-weight-bold" style="width: 250px; height: 180px" *ngStyle="{'opacity':
(object.booleanValue) ? 1.0 : 0.5}">
<div class="someActualContent">
<div>{{object.text}}</div>
....
</div>
</div>
</div>
Displaying of the objects works fine (all information are correctly shown) until I add the *ngStyle-directive. Then, no element is visible anymore. However, in inspect mode I can see that all list-items are actually there - they are invisible and smaller than I defined them in the div at style="...". Compiling is successful.
I tried object.booleanValue==true but this didin't lead to any changes.
Does someone have an explanation?
Thank you in advance!
Enclose the ngStyle directive in square brackets instead of micro-syntax notation *ngStyle. Try the following
<div
class="content font-weight-bold"
style="width: 250px; height: 180px"
[ngStyle]="{'opacity': (object.booleanValue) ? 1.0 : 0.5}"
>
...
</div>
Related
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 building a page preloader with ReactJS. The Codepen snippet I am using is written in HTML and I need help converting it into HTML ready for React.
Part of the snippet
<div class="socket">
<div class="gel center-gel">
<div class="hex-brick h1"></div>
<div class="hex-brick h2"></div>
<div class="hex-brick h3"></div>
</div>
</div>
Conversion to React
<div className={s.socket}>
<div className={s.gel s.center-gel}>
<div className={s.hex_brick s.h1}></div>
<div className={s.hex_brick s.h2}></div>
<div className={s.hex_brick s.h3}></div>
</div>
</div>
So I have replaced hyphens with underscores, used curly brackets instead of quotes, and added Name to the class. However, I don't know how to add the second div modifier (for example in div gel there is element center-gel). When a second element is added to a React div, it fails to compile.
React does not allow these second div elements. After testing, my loading animation does not look correct if I separate out the elements, the structure needs to stay the same.
Snippet Used
When you write JSX code in React you are actually writing JavaScript code. Let's say you put those expression into a variable like so:
var styles = s.gel s.center-gel;
It just doesn't make any sense in JS. You need to write a valid expression like this:
var styles = [s.gel, s['center-gel']].join(' ');
Keeping that in mind, your code should work this way:
<div className={s.socket}>
<div className={[s.gel, s['center-gel']].join(' ')}>
<div className={[s.hex_brick, s.h1].join(' ')}></div>
<div className={[s.hex_brick, s.h2].join(' ')}></div>
<div className={[s.hex_brick, s.h3].join(' ')}></div>
</div>
</div>
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
In my code i have a bunch of items rendered by ng-repeat.
These items use the bootstrap class col-md-3
and i'd like to add a feature which allows the user to see a large detail panel by clicking on one of these items.
However i'd like to accomplish it by having only one detail panel in my DOM and moving it around.
The html is like this:
<div ng-repeat="thing in thingsCtrl.things">
<thing-widget class="col-md-3"></thing-widget>
</div>
<thing-detail ng-show="thingsCtrl.showDetail" class="col-md-12"> </thing-detail>
any chance to accomplish?
Thanks in advance.
You could try moving the thing-detail inside the ng-repeat and use $index to add it or not.
<div ng-repeat="thing in thingsCtrl.things">
<thing-widget class="col-md-3"></thing-widget>
<thing-detail ng-if="$index === nth" ng-show="thingsCtrl.showDetail" class="col-md-12"> </thing-detail>
</div>