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!
Related
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>
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))
I am currently working on a web application using angular and angular material. The page in question holds several profiles each with a button that when clicked removes the information currently showing and replaces it with the rest of the profile information. The issue is that when I click this button on one profile it does this information flip on all the profiles at once. I need help figuring out how to have the button only affect the profile it is associated with.
I am still relatively new to coding, so I've mainly been doing research on advice on how to approach this particular situation, but nothing I've found so far has worked.
<mat-card class="bpBuddyCont" *ngFor= "let profile of profileList">
<div>
<ul class="bpBuddies">
<li class="li2">
<div *ngIf="!showHiddenInfo">
<mat-card-title class="specifics">{{profile.dogName}}</mat-card-title>
<mat-card-subtitle class="subtitle">Owner ~ {{profile.ownerFirstName}}</mat-card-subtitle>
<mat-card-subtitle>Member Since {{profile.yearJoined}}</mat-card-subtitle>
</div>
<div class="column4" *ngIf="showHiddenInfo">
<span class="details4">Additional Notes: </span>
<span class="details3">{{profile.additionalNotes}}</span>
</div>
</div>
<button mat-button color="primary" class="btn" (click)="showHiddenInfo = !showHiddenInfo">{{showHiddenInfo ? 'Back' : 'More...'}}</button>
</li>
</ul>
</div>
</mat-card>
You can extend the profile object with
profile.showHiddenInfo and set it as false initially.
For this in your js(most probably the component file) after getting profileList,
profileList.forEach((profile, index) => {
angular.extend(profile, {showHiddenInfo: false});
//not sure about this angular.extend but you need to extend your object here
});
Now when the button is clicked replace showHiddenInfo, i.e.
profile.showHiddenInfo = !profile.showHiddenInfo;
And Replace
*ngIf="showHiddenInfo"
with
*ngIf="profile.showHiddenInfo"
You can do this using one boolean variable for each object, as profile.isExpanded and on click change it as like:
(click)="profile.isExpanded = !profile.isExpanded"
HTML Code:
<mat-card class="bpBuddyCont" *ngFor="let profile of profileList">
<div>
<ul class="bpBuddies">
<li class="li2">
<div *ngIf="!profile.isExpanded">
<mat-card-title class="specifics">{{profile.dogName}}</mat-card-title>
<mat-card-subtitle class="subtitle">Owner ~ {{profile.ownerFirstName}}</mat-card-subtitle>
<mat-card-subtitle>Member Since {{profile.yearJoined}}</mat-card-subtitle>
</div>
<div class="column4" *ngIf="profile.isExpanded">
<span class="details4">Additional Notes: </span>
<span class="details3">{{profile.additionalNotes}}</span>
</div>
<button mat-button color="primary" class="btn" (click)="profile.isExpanded = !profile.isExpanded">{{profile.isExpanded ? 'Back' : 'More...'}}</button>
</li>
</ul>
</div>
</mat-card>
No change in TS file.
WORKING STACKBLITZ
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">