I use angular cli 1.4.3, node 6.11.3, npm 5.4.2, I want to read the records by using angular2. The output at localhost should be like this:
but the output that I get is like this:
here the html code:
<div class="row m-b-18px">
<div class="col-md-12">
<!-- button to create new product -->
<a (click)="createProduct()" class='btn btn-primary pull-right'>
<span class='glyphicon glyphicon-plus'></span> Create Product
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- HTML table for our list of product records -->
<table class='table table-hover table-responsive table-bordered'>
<tr>
<th>Product</th>
<th>Price</th>
<th>Description</th>
<th>Category</th>
<th>Actions</th>
</tr>
<!-- Use *ngFor directive to loop throught our list of products. -->
<tr *ngFor="let product of products">
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.description}}</td>
<td>{{product.category_name}}</td>
<td>
<!-- read one product button -->
<a (click)="readOneProduct(product.id)" class='btn btn-
primary m-r-5px'>
<span class='glyphicon glyphicon-eye-open'></span> Read
</a>
<!-- edit product button -->
<a (click)="updateProduct(product.id)" class='btn btn-info
m-r-5px'>
<span class='glyphicon glyphicon-edit'></span> Edit
</a>
<!-- delete product button -->
<a (click)="deleteProduct(product.id)" class='btn btn-danger
m-r-5px'>
<span class='glyphicon glyphicon-remove'></span> Delete
</a>
</td>
</tr>
</table>
</div>
</div>
Here the css code:
.m-b-18px{ margin-bottom: 18px; }
.m-r-5px{ margin-right: 5px; }
.w-40-pct{ width: 40%; }
.text-align-center{ text-align: center; }
Thank you
Looks like you do not include Bootstrap in your project. First, install it:
npm install --save bootstrap
Then go to angular-cli.json file, find styles properties and add "../node_modules/bootstrap/dist/css/bootstrap.min.css" so it looks like this:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Are you use the View encapsulation in the component?
Related
Have a question about the HTML view related to the table.
In my HTML view, I have a table.
This is worked in a responsive way when changing the view.
Here I want to change the view that the responsive view comes with a scroll bar.
I want to change it to fit all columns to the view and wrap the column contents.
Any suggestions to do it?
<div class="col-md-12 col-sm-12 grid-margin stretch-card">
<div class="card shadow-card-l">
<div class="card-body">
<center><h4 class="card-title">Task Related Documents</h4></center>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Document Type</th>
<th>Document Note</th>
<th>File Name</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TaskFilesHistoryViewModel.OrderByDescending(x => x.Id))
{
<tr class="even pointer">
<td>#item.File_Type</td>
<td>#item.Note</td>
<td>#item.File_Name</td>
<td>
<a href="#Url.Action("DownloadTaskImage","Ajax", new { id = item.Id})" target="_blank" rel="publisher tag" class="btn btn-outline-info ti-import" />
<a href="#Url.Action("RetrieveTaskImage","Ajax", new { id = item.Id})" target="_blank" rel="publisher tag" class="btn btn-outline-success fa ti-eye" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
on the home page of my dummy webapplication I want to display the top 5 sellers and the newest product. For this I am using a slide show. The slide show is already implemented. For the slides I want to use embedded HTML files with help of iframe tags. These embedded HTML files should display data loaded from mysql database.
The problem: how can I add a java entity to an iframe instead of adding it as an object to the ModelAndView? Is this even possible? Code snippet of the Spring controller (for loading the home page):
#RequestMapping(value={"","/"}, method = RequestMethod.GET)
public ModelAndView showHomePage() {
ModelAndView mv = new ModelAndView();
mv.setViewName("home");
List<ProductCategoryModel> productList = this.productRepository.getAllProductsByProductCategoryModel();
mv.addObject("productList",productList);
return mv;
}
Here I was adding all products as a list object to the home page view. Now inside the home.html, I would like to pass that list object to the iframe, but how? Here is the code snipped of the iframe (which is inside the div with id=slides__1):
<section>
<div class="slider-container">
<div class="slider">
<div class="slides">
<div id="slides__1" class="slide">
<iframe src="iframes/test.html" title="Top 5 Sellers"></iframe>
<a class="slide__prev" href="#slides__4" title="Next"></a>
<a class="slide__next" href="#slides__2" title="Next"></a>
</div>
<div id="slides__2" class="slide">
<span class="slide__text">2</span>
<a class="slide__prev" href="#slides__1" title="Prev"></a>
<a class="slide__next" href="#slides__3" title="Next"></a>
</div>
<div id="slides__3" class="slide">
<span class="slide__text">3</span>
<a class="slide__prev" href="#slides__2" title="Prev"></a>
<a class="slide__next" href="#slides__4" title="Next"></a>
</div>
<div id="slides__4" class="slide">
<span class="slide__text">4</span>
<a class="slide__prev" href="#slides__3" title="Prev"></a>
<a class="slide__next" href="#slides__1" title="Prev"></a>
</div>
</div>
<div class="slider__nav">
<a class="slider__navlink" href="#slides__1"></a>
<a class="slider__navlink" href="#slides__2"></a>
<a class="slider__navlink" href="#slides__3"></a>
<a class="slider__navlink" href="#slides__4"></a>
</div>
</div>
</div>
</section>
And now the HTML page (code snippet of the section) I want to embedd as iframe and that should load all products into a table. In this view I will access the list object with all products:
<section>
<div class="container">
<br><br><br>
<table class="table table-bordered table-striped" id="product-table">
<thead>
<tr>
<th>Image</th>
<th>Product Id</th>
<th>Category</th>
<th>Product Description</th>
<th>Price in $</th>
<th>Image Source</th>
<th>Enabled</th>
</tr>
</thead>
<tbody>
<tr th:each="product: ${productList}">
<td><img th:src="${product.productImgSource}" alt="productImg" width="50" height="50"></td>
<td th:text="${product.productId}"></td>
<td th:text="${product.categoryText}"></td>
<td th:text="${product.productDescription}"></td>
<td th:text="${product.productPrice}"></td>
<td th:text="${product.productImgSource}"></td>
<td th:text="${product.enabled}"></td>
</tr>
</tbody>
</table>
</div>
</section>
Note: finding the top 5 sellers is not implemented yet, I just wanted to test it first with all products. Thanks in advance for any advice.
I have a dark background on my webpage, so when I implement DataTables into my project, the search bar is barely visible. I import the scripts instead of directly having the source code for DataTables in my project, so I can't change the color of the search bar there.
How might I change the color from black to white? This is what it looks like at the moment:
Here is my code, I'm using Razor Pages
#page
#model CustomerPageTest.Pages.Customer.ListModel
#{
ViewData["Title"] = "List";
}
#section Scripts
{
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').dataTable({
"paging": false,
columnDefs: [{
targets: -1,
className: 'dt-head-center'
}]
});
});
</script>
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<h1 align="center" style="color:yellowgreen">1) Select/Add Customer</h1>
<br />
<div>
<p align="center">
<a class="btn btn-dark"
asp-page="/Index"><i class="glyphicon glyphicon-arrow-left"></i> Back</a>
<a class="btn btn-dark"
asp-page="./AddCustomer"><i class="glyphicon glyphicon-plus"></i> Add New Customer</a>
<a class="btn btn-dark"
asp-page="./ListAssessments"><i class="glyphicon glyphicon-plus"></i> Use Existing Assessment</a>
</p>
</div>
<table id="myTable" class="display cell-border stripe" role="grid" style="background-color: #dbdbdb; text-align:center; width: 100%">
<thead class="text-light">
<tr class="text-dark">
<th style="text-align: center"><strong>Customer</strong></th>
<th style="text-align: center"><strong>Notes</strong></th>
<th style="text-align: center"><strong>New Assessment</strong></th>
</tr>
</thead>
<tbody style="background-color: #dbdbdb;">
#foreach (var customer in Model.Customers)
{
<tr class="text-dark">
<td style="padding-top: 15px">#customer.name</td>
<td style="padding-top: 15px">#customer.notes</td>
<td>
<a class="btn btn-dark"
asp-page="/Assessment/AddAssessment" asp-route-customerId="#customer.customer_id">
<i class="glyphicon glyphicon-plus"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
Edit: Found the class and id that links to the search bar, added new definitions into the CSS to try and overwrite it, but no new results...
Here is a screenshot of the Inspect:
And the CSS code I have added:
/*Change Search Bar to White*/
.myTable_filter {
color: white;
}
#dataTables_filter {
color: white;
}
Any thoughts?
That search-box on dataTable seems to be generated by the package script.
So you can change the background color of input tag by overriding the css style only.
Based on inspect screenshot, this will work.
#myTable_wrapper .dataTables_filter input {
background-color: white;
}
I get this ExpressionChangedAfterItHasBeenCheckedError when i am using random numbers progress bar in my html grid table.It says "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: some value. Current value: some value.". Someone please help me with the issue.
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLinkActive="active">
<button class="btn btn-primary" (click)="goToAddUser()">Add User</button>
</a>
</li>
</ul>
</nav>
<div class="panel panel-primary">
<div class="panel-heading">
<h2>User List</h2>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Actions</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users | async">
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
<td>{{user.email}}</td>
<td>
<button (click)="goToEditUser(user.id)" class="btn btn-info">Update</button>
<button (click)="deleteUser(user.id)" class="btn btn-danger" style="margin-left: 10px">Delete</button>
<button (click)="goToViewUser(user.id)" class="btn btn-info" style="margin-left: 10px">Details</button>
</td>
<td>
<mat-progress-bar [value]="number" style="margin-right: 300px"></mat-progress-bar>
{{ number }}%
</td>
</tr>
</tbody>
</table>
</div>
</div>
The getRandomNumber() return value changes after angular change detection already checked its value. To understand the error better, read this article:
https://hackernoon.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
Here's one solution, make a class field called randomNumber and assign it to the value of getRandomNubmer().
class YourComponentClass { randomNumber : number = this.getRandomNumber(); ... }
In Html
<td> <mat-progress-bar [value]="randomNumber" style="margin-right: 300px">
</mat-progress-bar> {{ randomNumber }} </td>
if you want to change your randomNumber just create a click event handler to reassign randomNumber to getRandomNumber() method
You need to manually check for changes.
// Import
import { Component, OnInit, ChangeDetectorRef } from '#angular/core';
// Inject
constructor(private cd: ChangeDetectorRef)
// Call after making changes in component
someMethod() {
this.cd.detectChanges();
}
The dropdown on the right is in a table cell, this works as intended on desktop browser.
However on mobile, on click, the dropdown gets split into two lines:
HTML
<table class="table table-striped table-bordered table-hover">
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td>
<div class="btn-group">
<i class="icon-eye-open icon-white"></i> Visualizza
<button class="btn dropdown-toggle btn-primary btn-small" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Modifica</li>
<li><a class="btn-confirm" href="#"><i class="icon-trash"></i> Elimina</a></li>
</ul>
</div>
</td>
</tr>
</table>
The problem most likely stems from the table cell width being laid out too short for both elements.
The simplest solution would be to set add a class to that cell and add min-width, though you would be moving away from pure bootstrap.
HTML:
<td> ... </td>
<td class="dropdownCell">
<div class="btn-group">
...
Css:
.dropdownCell { min-width:130px; }
Fiddle is here: http://jsfiddle.net/a4kx75t1/1/