I get a response from backend server for my angular 2/4 application. The response includes an attribute "connectionStatus", which indicates the status of a database-connection with "UP" or "DOWN". I show the retrieved status and other informations in my view with the following code:
<tbody>
<tr *ngFor='let database of environment.databases'>
<td>{{database.connectionName}}</td>
<td>{{database.dbSourceType}}</td>
<td>{{database.username}}</td>
<td>{{database.password}}</td>
<td>{{database.connectionUrl}}</td>
<td>{{database.creationDate}}</td>
<td>{{database.connectionStatus}}</td>
<td>
<button (click)='onEditDatabase(environment,database)'class="btn btn-primary btn-sm oi oi-cog"></button>
<button (click)='onDeleteDatabase(database)'class="btn btn-danger btn-sm oi oi-trash"></button>
</td>
</tr>
</tbody>
Instead of showing the status as "UP" or "DOWN", i want to use openiconics. If the state is "UP", then use the check-icon, if its down, the flash-icon. How can i realize that? i appreciate all help.
Make use of ngClass
<td [ngClass]="(database.connectionStatus ==='UP')?'upclass':'downclass'"></td>
in the css define the class and icons
.upclass{check-icon}
.downclass{flash-icon}
You can use *ngIf or [hidden] to display one of the status as per your condition.
<td *ngIf="database.connectionStatus">your icon UP html tag here</td>
<td *ngIf="!database.connectionStatus">your icon DOWN html tag here</td>
Related
My intention is to obtain an object inside one of the rows of the table, so I could forward it to a form using a simple JavaScript function. I am not familiar with jQuery so I thought I’ll take an as-simple-as-possible approach. I was thinking of doing this by using the th:data* attribute in combination with th:each, like this:
<tr th:each="employee : ${empDetailsList}" th:data-employee="${employee}">
<td scope="row" th:text="${employee.id}">ID</td>
<td scope="row" th:text="${employee.firstName}">firstName goes here</td>
<td scope="row" th:text="${employee.lastName}">lastName goes here</td>
<td scope="row" th:text="${employee.email}">email goes here</td>
<td scope="row" th:text="${employee.username}">user name goes here</td>
<td th:data-employee="${employee}">
<button type="button" class="btn btn-info" th:onclick="showEditForm(this.getAttribute('data-employee'));">Details</button>
</tr>
I also tried this approach, moving the th:data-employee from the 'tr' tag to the 'td' tag but the result is the same:
<tr th:each="employee : ${empDetailsList}">
...
<td th:data-employee="${employee}">
<button type="button" class="btn btn-info" th:onclick="showEditForm(this.getAttribute('data-employee'));">Details</button>
</tr>
The JS function:
function showEditForm(employee){
console.log('Employee object here: ');
console.log(employee.firstName);
console.log(employee.lastName);
}
As I mentioned I get the same result in both cases. The browser consoles response is:
Employee object here:
TypeError: employee is null
So, what am I doing wrong here?
This worked for me:
<p th:each="testScript:${testScripts}">
<a th:href="|/scripts/start/${testScript}|" th:text="'Start '+ ${testScript}"/>
<a th:href="|/scripts/stop/${testScript}|" th:text="'Stop' + ${testScript}"/>
<button id="searchButton" name="searchButton" th:onclick="start(this.getAttribute('data_p1'));" type="button"
th:data_p1="|${testScript}|"
th:text="|${testScript}|">Start</button>
</p>
I am trying to call a function whenever i click a row in an HTML table but it is not working and it is not giving any errors.
I've tried several things, and online code shows that the way i try it, it should be working.
My code is as following:
Html:
<h2>Userstories</h2>
<button (click)="onNewStory()">New Story</button>
<table>
<tr *ngFor="let story of userstories" ng-click="onUpdate(story)" [class.selected]="story === selectedStory">
<td>{{story.id}}</td>
<td>{{story.name}}</td>
<td><button ng-click="onUpdate(story)">Click me!</button></td>
</tr>
</table>
<app-userstory-detail [story]="selectedStory"></app-userstory-detail>
And my .ts looks like this:
selectedStory: UserStory;
onNewStory() {
var newStory = {id:this.userstories[this.userstories.length-1].id+1, name:"", description:"Deze is nieuw", status:"open", owner:USERS[1]};
this.userstories.push(newStory);
this.selectedStory = newStory;
}
onUpdate(userstory: UserStory): void {
this.selectedStory = userstory;
console.log(this.selectedStory);
}
Currently my console is not printing the log, when i try to call the onUpdate method. The expected result is to see some output in the logs, but i have no clue why it is not firing the onUpdate method.
In angular 7 you can use (click) which is similar to ng-click of Angular JS.
Try:
<h2>Userstories</h2>
<button (click)="onNewStory()">New Story</button>
<table>
<tr *ngFor="let story of userstories" (click)="onUpdate(story)" [class.selected]="story === selectedStory">
<td>{{story.id}}</td>
<td>{{story.name}}</td>
<td><button (click)="onUpdate(story)">Click me!</button></td>
</tr>
</table>
<app-userstory-detail [story]="selectedStory"></app-userstory-detail>
StackBlitz Demo
ng-click is actually for AngularJS (1.x)
You want to use (click) which is for Angular.
DOCUMENTATION: https://angular.io/guide/ajs-quick-reference#ng-click
The event is fired twice. In <tr> and in <button>.
Try this:
<h2>Userstories</h2>
<button (click)="onNewStory()">New Story</button>
<table>
<tr *ngFor="let story of userstories" [class.selected]="story === selectedStory">
<td>{{story.id}}</td>
<td>{{story.name}}</td>
<td><button (click)="onUpdate(story)">Click me!</button></td>
</tr>
</table>
<app-userstory-detail [story]="selectedStory"></app-userstory-detail>
i have a table which are having mat-icon-buttons after clicking on button it should display 2 buttons at end of the table.
if i click on button it chaining color from primary to red color and now i want to 2 buttons for this button i mean after clicking button at the end after complication of table it should display buttons ( edit and save). i would like know how add that 2 buttons end of the table when we clicked mat-icon-button.
please help me in these.
Thanks.
<tr*ngFor="let data of database ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="data.isClicked = !data.isClicked" [ngClass]="{'myClass': data.isClicked}">
<mat-icon>remove_circle</mat-icon>
</button>
</td>
<tr>
You can use your already implemented data.isClicked property to handle the visibility of the other buttons. If they should only be visible, if the first button is clicked just do it like this:
<tr*ngFor="let data of database ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="data.isClicked = !data.isClicked" [ngClass]="{'myClass': data.isClicked}">
<mat-icon>remove_circle</mat-icon>
</button>
</td>
<td *ngIf="data.isClicked">
<button>Edit<button>
<button>Save<button>
</td>
<tr>
EDIT After clarification:
Just combine your actions in a Click Mehtod then:
Your HTML File:
<tr*ngFor="let data of database ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="clickEvent(data)" [ngClass]="{'myClass': data.isClicked}">
<mat-icon>remove_circle</mat-icon>
</button>
</td>
<tr>
<div*ngIf="showButtons">
<button>Edit<button>
<button>Save<button>
</div>
And your .ts File:
showButtons: boolean = false;
clickEvent(data){
data.isClicked = !data.isClicked;
this.showButtons = !this.showButtons;
}
I have this simple Angular2/html table:
<tr *ngFor="let item of mf.data; let i = index;">
<td><input type="checkbox" value="" [(ngModel)]="item.checked" ></td>
<td>{{i}}</td>
<td>{{item.name}}</td>
<td>{{item.password}}</td>
<td>{{item.number}}</td>
<td>Infos</td>
<td><button type="button" class="btn btn-success" [disabled]="!item.checked">start</button></td>
</tr>
I would like to hide field password with ***** or ....., but display clear text when mouse hovers in and hide when mouse hovers out. Basically, I is sensitive data and I don't want some one to be able to take a photo when I open my app. How can I do this ?
Use the mouseover and mouseout events and bind a display variable to them.
E.g.:
<td (mouseover)="displayPassword = true" (mouseout)="displayPassword = false">{{displayPassword? item.password : '****'}}</td>
maybe something like this could do the trick :
// not working <td title="{{item.password}}">{{item.password.split('').forEach(p => '*')}}</td>
<td title="{{item.password}}">******</td>
I have finally found something that work find. Fill free to improve this solution.
Basically I added an index to every of my rows.
<td align="center" (mouseover)="displayPassword(item.index)" (mouseout)="hiddePassword(item.index)">{{item.showpassword? item.password:'00000000000000000000000000000000000'}}</td>
In my app.component.ts, I added this two functions:
displayPassword(index){
console.log(index)
this.data[index].showpassword = true;
}
hiddePassword(index){
this.data[index].showpassword = false;
}
now it is working as expected ...
I have an observableArray self.CustomerOrders which I populate with
self.CustomerOrders.push(new CustomerOrder(self.getOrderId(), today.toLocaleDateString() , self.selectedCustomer2(), JSON.stringify(self.cart(),null,4)));
where
self.getOrderId() is a method to get an Id for the order,
today.toLocaleDateString() prints today's date,
self.selectedCustomer2 is the selected customer of the order and
self.cart is another observableArray which includes all ordered items.
Here is how I populate self.cart
self.cart.push(new orderedItem(product.id, product.name, product.price, product.quantity()));
and here is my foreach
<tbody data-bind="foreach: CustomerOrders">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: date"></td>
<td data-bind="text: customer"></td>
<td data-bind="text: details"></td>
<td data-bind="click: $parent.selectedOrder"><a class="btn btn-primary" data-toggle="modal" data-target="#display-order">View</a>
</td>
<td data-bind="click: $parent.selectedOrder"><a class="btn btn-primary" data-toggle="modal" data-target="#edit-order">Edit</a>
</td>
<td data-bind="click: $parent.selectedOrder"><a class="btn btn-primary" data-toggle="modal" data-target="#delete-order">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
I succeed in saving all those data to the CustomersOrders observable array and then I print them in my UI using foreach. My problem is that the self.cart items are printed as JSON and I do not want to display JSON to the user but HTML.
How to implement this ?
Any ideas ?
Ok, so don't JSON.stringify your cart. Then, assuming your Details binding is where the cart part is supposed to end up, and it's supposed to be an array, you can just nest foreach bindings like this:
<td>
<ul data-bind="foreach: details">
<li data-bind="text: someProperty"></li>
</ul>
</td>
where someProperty is whatever property of the cart you want to display.
Of course, you can choose whatever html elements suit your requirements.
My problem is that the self.cart items are printed as JSON
Well, that's not surprising.
self.CustomerOrders.push(
new CustomerOrder(
self.getOrderId(),
today.toLocaleDateString(),
self.selectedCustomer2(),
JSON.stringify(self.cart(),null,4) /* guess what that does */
)
);
Just do
self.CustomerOrders.push(
new CustomerOrder(
self.getOrderId(),
today.toLocaleDateString(),
self.selectedCustomer2(),
self.cart
)
);
and use regular knockout bindings in your view to display the cart.