I have "RowsLenght" and i need to see the tooltip when I hover on it but showing the result of {{row.boxes.length}} in addtion to "No." txt.
I mean forexample I want to see "5 No." in the tooltip. Would you please help?
<div> {{'RowsLenght' | translate}}
<span > ({{row.boxes.length}} )</span>
</div>
One option would be to simply use the html title attribute on your div:
<div title="No. {{ row.boxes.length }}">
{{'RowsLenght' | translate}}
</div>
Related
I have this layout. What I want to do is, when a button Join is clicked, hide that button and show an input field in its place like this, and if another button is clicked the first one returns to its normal state and another input field is displayed like this.
I'm working with Angular 13. Here is a code snippet of the concerned div.
<div *ngIf='show === "default"' class="list">
<div class="form-listItem" *ngFor="let room of roomList">
{{ room }}
<button class="formBtn" (click)="enterPassword($event.target)" id="{{ room }}">Join</button>
<div class="joinRoomPasswordContainer" id="{{ room }}-">
<input class="joinRoomPassword" type="password" placeholder="********">
<button class="joinRoomBtn">
<img class="rightArrow" src="/assets/rightArrow.svg" alt="">
</button>
</div>
</div>
</div>
In the Ts file you initialize two variable with boolean type true and false.
and create write a fun like:-
func1(){
this.a = true;
this.b = false;
}
call this function on the button and the panel you want to open on click that div give - *ngIf with these two variable.
you could add a property for room object, some like 'joined', then add ngIf directive for view change
<button class="formBtn" *ngIf="!room.joined" (click)="enterPassword($event.target); room.joined = true" id="{{ room
}}">Join</button>
<div class="joinRoomPasswordContainer" id="{{ room }}-" *ngIf="room.joined">
<input class="joinRoomPassword" type="password" placeholder="********">
<button class="joinRoomBtn">
<img class="rightArrow" src="/assets/rightArrow.svg" alt="">
</button>
</div>
In my homepage I have a search bar and a list of user favorite cards. Only If there is no favorited cards on the initial browser load and when a user removed all their favorite cards then it'll show a banner "Add a favorite...".
The problem I have right now is the banner is displaying when I search something on the search-bar and found no favorited card. How do I fix that?. I don't want to show my banner if there is no search result found.
If I do favorites.size == 0 instead then the banner is not showing up at all when browser load or user removed all their cards.
<div class="input">
<form class="search-form">
<input #searchValue id="input-field" class="input-field" type="search"
name="insightSearchFilter" (ngModelChange)="filterChanged($event)" [formControl]="inputCtrl"/>
<p class="hint" *ngIf="inputCtrl.value">
<strong> {{ favorites?.length }} Search Result for </strong><em>"{{ inputCtrl?.value }}".</em>
<strong> The Results listed below are exact matches for your query.</strong>
</p>
</form>
</div>
<div *ngIf="favorites">
<div *ngIf="favorites.length > 0">
<app-card-list [cards]="favorites"></app-card-list>
</div>
<div *ngIf="favorites.length == 0" class="empty-faves-container">
<div class="add-faves-container">
<div class="add-faves-ico"></div>
<div class="text">Add a Favorite</div>
</div>
</div>
</div>
Since you are filtering this.favorites in filterChanged methods. You should apply check for search text also along with length check.
like
(favorites.length == 0 && !(inputCtrl.value))
First off, I have images (switches), which have names (K1,K2,K3,..). I'd like to attach the displayed name K1, to the respective (displayed) switch, just like it is illustrated in the picture below.
Here is the code I'm currently using:
<div id="app">
<fieldset style="background-color: rgb(181, 207, 209);">
<h1>simTest server</h1>
<hr>
<div class="circuitplan">
<div v-for="(val, key, index) in switchObj" v-bind:key="key">
<div>
<span class="switch" v-bind:class="{ closed: val==='closed', opened: val==='opened', K1: key==='K1', K2: key==='K2', K3: key==='K3', K4: key==='K4', K5: key==='K5'}" #click="onSwitchClick(key)"></span>
</div>
</div>
</div>
</fieldset>
What I tried before was that I put the name of the switches a.k.a. "{{ key }}" here:
<span class="switch" v-bind:class="{ closed: val==='closed', opened: val==='opened', K1: key==='K1', K2: key==='K2', K3: key==='K3', K4: key==='K4', K5: key==='K5'}" #click="onSwitchClick(key)">{{ key }}</span>
All names of the available switches were displayed, but chaotically. Another thing I tried was to use :hover to display the switches when hovering over them, as a (gotta admit bad) workaround.
Anyone having a good idea how to implement this 'feature'? Thx in advance!
I have some decks of cards.
I want to display a specific image for each deck, I have an assets folder with all my images.
<div class="decks">
<div *ngFor="let deck of decks" class="deck">
<img
src="../../assets/img/MAGE.png"
MAGE is just an exemple of a deckClass, that name should match deck.deckClass
class="img-responsive"
style="height: 200px;">
<h4> {{deck.deckName}} : {{deck.deckClass}} </h4>
<p *ngFor="let card of deck.deckCards" >
{{ card.name }} : {{ card.manaCost }}
</p>
</div>
</div>
How can I concatenate in a src attribute the deck.deckClass name in a dynamic way?
Consider using the Expression Context
You can wrap the sry attribute with square brackets, this way Angular will know to evaluate the value:
[src]="'../../assets/img/' + deck.deckClass '.png'"
See a demo here: https://stackblitz.com/edit/angular-ua9cfc
I don't have images in there, so they will be shown as broken img's in the demo ...
p.s.: if those images are in your src/assets/ folder, then this should suffice:
[src]="'assets/img/' + deck.deckClass '.png'"
I have a component that show/hide element by clicking a button.
This is my html
<div *ngFor="let history of histories | sortdate: '-dateModified'">
<p><b>{{ history.remarks }}</b> - <i>{{history.dateModified | date:'short'}}</i></p>
<a href="google.com"
[class.datatable-icon-right]="history.$$expanded"
[class.datatable-icon-down]="!history.$$expanded"
title="Expand/Collapse Row"
(click)="toggleExpandRow(history)"></a>
<!-- hide/show this by clicking the button above.-->
<div *ngFor="let step of history.steps; let i = index">
<b>{{i+1}}.</b> {{step}}
<span class="clear"></span>
</div>
<hr />
</div>
and my .ts
toggleExpandRow(row) {
console.log('Toggled Expand Row!', row);
//row
return false;
}
trying to search but, can't find any same sample.
On jquery, I can do this, but on Angular2, I am having hard time to figure this.
There are two options:
1- You can use the hidden directive to show or hide any element
<div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
2- You can use the ngIf control directive to add or remove the element. This is different of the hidden directive because it does not show / hide the element, but it add / remove from the DOM. You can loose unsaved data of the element. It can be the better choice for an edit component that is cancelled.
<div *ngIf="edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
Use the ngIf in your repeated rows. Create a boolean property called showStep to indicate whether the row should be expanded or not.
<div *ngFor="let step of history.steps; let i = index" ngIf="history.showStep">
<b>{{i+1}}.</b> {{step}}
<span class="clear"></span>
</div>
Then, in your .ts file:
toggleExpandRow(history) {
history.showStep = !history.showStep
//note the same porperty of showStep that is used in your html
}
Extra:
In fact, to save a few lines of codes, you don't even need the toggleExpandRow function at all. You can do it inline in your html:
//other attributes omitted for brevity
<a (click)="history.showStep = !history.showStep">