Is there any way in angular, html or css to dynamically apply CSS based on object value:
HTML:
<mat-grid-tile *ngFor="let obj of objs">
<span class="(value according to variable)">
{{ obj.n }}
</span>
</mat-grid-tile>
CSS:
.first {
color: #db4437;
}
.second {
color: #32cd32;
}
What I want to do is,
if obj.n is red, I want first as the class of span tag
and second => otherwise
Try [ngClass] and evaluate expression
<mat-grid-tile *ngFor="let obj of objs">
<span [ngClass]="(obj.n ==='red')? 'first' : 'second'">
{{ obj.n }}
</span>
</mat-grid-tile>
Take a look at this demo
Or
<span [class.first]="obj.n === 'red'" [class.second]="obj.n !== 'red'">{{obj.n}}</span>
Related
I'm generating multiple cards using *ngFor and I added see more button to overflow the text inside the card
Component.html
<div *ngFor="let classifciation of tenderClassification">
<mat-card >
<mat-card-title>{{classifciation.name}} </mat-card-title>
<mat-card-subtitle>Starting price {{classifciation.amount}} TND</mat-card-subtitle>
<mat-card-actions>
<p [ngClass]="{'limitTextHeight': isReadMore}">
{{classifciation.description}}
</p>
<button mat-button (click)="showText()">
{{ isReadMore ? 'Read More': 'Read Less' }}
</button>
</mat-card-actions>
</mat-card>
</div>
Component.ts
isReadMore = true;
showText() {
this.isReadMore = !this.isReadMore
}
Component.css
.limitTextHeight {
height: 20px;
overflow: hidden;
}
And the result when I click to read more button all cards call the showText() function and all cards apply the read more but I want only that specific card to be applied with read more
Before I click
enter image description here
After I click on one read more button
enter image description here
Any solution to target that specific card?
Create a new component that receives a classification as input.
card.component.html
<mat-card>
<mat-card-title>{{classifciation.name}} </mat-card-title>
<mat-card-subtitle>Starting price {{classifciation.amount}} TND</mat-card-subtitle>
<mat-card-actions>
<p [ngClass]="{'limitTextHeight': isReadMore}">
{{classifciation.description}}
</p>
<button mat-button (click)="showText()">
{{ isReadMore ? 'Read More': 'Read Less' }}
</button>
</mat-card-actions>
</mat-card>
#Component({
selector: 'app-card',
template: `./card.component.html`,
})
export class CardComponent {
#Input() classification: any;
isReadMore = true;
showText() {
this.isReadMore = !this.isReadMore
}
}
in your parent component.
<div *ngFor="let classification of tenderClassification">
<app-card [classification]="classification"></app-card>
</div>
As you can see the code is cleaner, and you can add more behaviour to each card component.
I am making an angular component to make a bunch of qr codes and print them. I have a component just for the qr code and want to make it possible to delete a qr code from the list and undo-delete a previously deleted code. I Before adding the undo-delete functionality, everything was working well because I was just removing that particular component from the list. However, now I don't want to completely remove it, I just want to fade it out until print time. I am using ngClass on my div and the "deleted" class does work. Anything that has class noPrint just gets display:none, however when I try to use ngClass to dynamically give a code noPrint, it doesn't set display: none on that particular code.
My qr-code html: The issue is in the first div tag at the top. I have tried adding single quotes on the class names to see if that works as well.
<div
fxLayout="column"
class="qrobj"
[ngClass]="{
deleted: !this.shouldExist,
noPrint: !this.shouldExist
}"
>
<button *ngIf="this.shouldExist" class="noPrint" mat-icon-button>
<mat-icon
matTooltip="Delete this Person?"
matTooltipPosition="after"
color="warn"
(click)="sendDelete()"
>block</mat-icon
>
</button>
<button *ngIf="!this.shouldExist" class="noPrint" mat-icon-button>
<mat-icon
matTooltip="Undo Delete?"
matTooltipPosition="after"
color="primary"
(click)="undoDelete()"
>undo
</mat-icon>
</button>
<div fxLayout="row" class="text">
<p>{{ person.Name }}</p>
<p>{{ person.Name }}</p>
</div>
<div fxLayout="row" class="images">
<img [src]="this.qrlink" (error)="getDefaultUrl()" />
<img [src]="this.piclink" (error)="getDefaultUrl()" />
</div>
</div>
Here is the part of my css that matters:
.deleted {
opacity: 0.3;
}
#media print {
.noPrint {
display: none;
}
}
This is what it looks like
before I delete a Code
This is what it looks like
after I delete a Code:
This is what shows up in the print preview:
I been trying to apply background color with ngClass to a mat-list and mat-list-item. If the condition is true, the background color is yellow else it stays normal white. When I just apply the regular
style="background-color:yellow"
in my html code, all the mat-list- item cells have a yellow background color.
I changed it the following which does not work
[ngClass]="myData.hasAlert ? 'highlight-color' : 'normal-color'"
[ngClass]="{'highlight-color' : myData.hasAlert }"
as a test, I even try ng-style="{ highlight : myData.hasAlert }" but nothing works.
Here is my code
<div class="ng-container" >
<mat-list [ngClass]="test.IsNotRedAlert ? 'my-list-black-font' : 'my-list-red-font'">
<!-- insert the subtotals-->
<mat-list-item
fxLayoutAlign="end"
class="metric-possition"
*ngFor="let myData of AllData"
class="background-color:yellow">
{{myData.balance}}</span>
</mat-list-item>
</mat-list>
</div>
at first, I added the css class to the mat-list ngClass but it change all the child mat-list-item to yellow background color under the mat-list. I need to only apply the background to certain mat-list-item cell if the condition of myData.hasAlert is true.
I tried with the following css
.highlight .mat-list-item {
background-color: yellow;
}
.highlight {
background-color: yellow;
}
any help is appreciated. Thanks.
Using ngClass, this is the correct syntax you should use according to the documentation:
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
So in your case, that would be:
<mat-list-item [ngClass]="{'yellow-background': myData.hasAlert}">
And in your css file:
.yellow-background {
background-color: yellow;
}
Your class declaration is invalid.
Change to below code
<div class="ng-container">
<mat-list>
<!-- insert the subtotals-->
<mat-list-item *ngFor="let myData of allData"
[ngClass]="{'highlight':myData.hasAlert}">
{{myData.balance}}
</mat-list-item>
</mat-list>
</div>
Instead of ngClass, you can use this syntax:
<mat-list [class.my-list-black-font]="test.IsNotRedAlert">
Hello,
I use Angular 5 and material for my project, i'm trying to change the width of the autocomplete panel, with the exemple, i can now display the options corretly, but i cannot see all the informations for the options, then i modified the css file of the new component, but it doesn't work for the material component, can someone tell me how to do it, please?
This is the html of the component:
<mat-expansion-panel [expanded]="panelOpenState === true">
<mat-expansion-panel-header>
<mat-panel-title>
Critère de recherche
</mat-panel-title>
<mat-panel-description>
Saisir un numéro de procédure
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field>
<input id="autocomplete" type="text" matInput placeholder="number" [ngControl]="inputControl"
[(ngModel)]="searchValue" [matAutocomplete]="auto" (keyup)="onChange()">
<mat-autocomplete #auto="matAutocomplete" class="class1">
<mat-option *ngFor="let procedure of filteredProcedures | async" [value]="procedure.procedureId">
<span>{{procedure.procedureId}} | </span>
<small>{{procedure.firstName}} </small>
<small>{{procedure.lastName}}</small>
<small>{{procedure.userId}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<button class="pull-right btn btn-info" (click)="search()">
<span matTooltip="Chercher une procédure">
<i class="fa fa-search"></i> Chercher </span>
</button>
</mat-expansion-panel>
And the css file:
.mat-button {
color: white
}
#autocomplete {
width: 400px, !important;
}
.class1 {
width: 400px, !important;
}
.cdk-overlay-pane {
width: 400px;
}
I have tried also to use :host, but it doesn't work.
:host ::ng-deep mat-autocomplete-panel(class1) {
width : 400px;
}
Can you tell me where is the error, please?
I want to display all/more informations of the options.
In fact, with the css file, the button style is applied correctly. but it doesn't work for the autocomplete panel, why?
Thank you.
Remove the commas from your css (then the width works) and you can't use :host as a pseudo since it's not a pseudo element. Pseudos list here: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
#autocomplete {
width: 400px !important;
}
.class1 {
width: 400px !important;
}
I want the hover pseudo element to set the child's content with data from the parent (the hover). The following snippet shows a small test:
CSS
.word:hover {
color: blue;
}
.word:hover ~ #lookup:after {
content : attr(data-test);
}
HTML
<span class="word" data-test="elke dag / 每天">everyday</span>
<span class="word" data-test="Ik / 我">I</span>
<span class="word" data-test="drink / 喝">drink</span>
<span class="word" data-test="koffie / 咖啡">coffee</span>
<div id="lookup" data-test="Duh!">Lookup: </div>
However, the content that gets set is data-test from the target 'Duh!' instead of the one being hovered over. I can solve this easily with JavaScript, but looking if it is possible using CSS only.
http://jsfiddle.net/u7tYE/1951/
That is a very clever usage of CSS3 technology, but unfortunately I don't think there's a way to do what you're trying to do with just CSS. The problem is that you can't use attr() from a different selector other than the one you're currently in. The workaround is very simple in JavaScript.
window.onload = function() {
var lookup = document.getElementById('lookup'),
words = document.querySelectorAll('.word');
for(var i = 0; i < words.length; i++) {
words[i].mouseover = function() {
lookup.innerHTML = 'Lookup: '+ this.getAttribute('data-test');
}
}
};
JSFiddle
My way of solving this would be
html:
<span class="hovertarget">
<span class="word" >everyday</span>
<span class="hover">elke dag / 每天</span>
</span>
<span class="hovertarget">
<span class="word" >I</span>
<span class="hover">Ik / 我</span>
</span>
<span class="hovertarget">
<span class="word" >drink</span>
<span class="hover">drink / 和</span>
</span>
<span class="hovertarget">
<span class="word" >coffee</span>
<span class="hover">koffie / 咖啡</span>
</span>
css:
.hover {
display:none;
}
.hovertarget:hover .word {
display: none;
}
.hovertarget:hover .hover {
display: block;
}
According to the mozilla docs, no: https://developer.mozilla.org/en-US/docs/Web/CSS/attr
The attr() CSS expression is used to retrieve the value of an attribute of the selected element and use it in the style sheet.