Hi I am using angular to display a tabulate page, in this page i will display 100 records and implement pagination on the records
I used the example showing in the official documents, but didn't work. I am struggling for a while, so I am wondering if I can get help here:
here is the component I created for the page.
In the html page:
<div id="main-body">
<div class="search-bar">
<div class="input-group mb-3">
<select [(ngModel)]="searchBy" class="border-primary">
<option value="">-- choose an option--</option>
<option value="id"> ID</option>
<!-- <option value="anchorPoint">Anchor Point</option> -->
<option *ngFor="let label of homeLabelList" value="anchorPoint">{{label | uppercase}}</option>
</select>
<input type="text" class="form-control card border-primary ele fnt" placeholder="Enter the SIR ID or Host or sha256 or User ID"
aria-label="Ticket Id" aria-describedby="button-addon2" [(ngModel)]="currentTicketId">
<div class="input-group-append">
<button class="btn btn-primary ele" type="button" id="button-addon2" (click)="searchTicket()">Lets
Search!</button>
</div>
</div>
<div class="dates filter-tab">
<form [formGroup]="filterAllForm" (ngSubmit)="filterAllTicket()" class="table-list">
<mat-form-field class="filter-box">
<input matInput [matDatepicker]="startDate" placeholder="Choose a start date" formControlName="startDate" />
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate></mat-datepicker>
</mat-form-field>
<mat-form-field class="filter-box">
<input matInput [matDatepicker]="endDate" placeholder="Choose a end date" formControlName="endDate" />
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate></mat-datepicker>
</mat-form-field>
<button class="btn btn-primary filter-button ele" id="button-addon4" type="submit"> Filter </button>
</form>
</div>
</div>
<div class="ticket-result">
<div *ngIf="allTickets" class="ticket-container">
<table mat-table [dataSource]="ticketList" class="mat-elevation-z8">
<!-- Ticket Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> SIR ID </th>
<td mat-cell *matCellDef="let element">
<a href='ticket/{{element.id}}'>{{element.id}}</a>
</td>
</ng-container>
<!-- Type Column event source -->
<ng-container matColumnDef="findingSourceSystem">
<th mat-header-cell *matHeaderCellDef> Source </th>
<td mat-cell *matCellDef="let element"> {{element.findingSourceSystem}} </td>
</ng-container>
<!-- Type Column Related Event count -->
<ng-container matColumnDef="label">
<th mat-header-cell *matHeaderCellDef> Related Cases </th>
<td mat-cell *matCellDef="let element"> {{element.relatedVertices.length}} </td>
</ng-container>
<!-- Type Column event source -->
<ng-container matColumnDef="caseStatus">
<th mat-header-cell *matHeaderCellDef> Case Status </th>
<td mat-cell *matCellDef="let element"> {{element.caseStatus}} </td>
</ng-container>
<!-- Type Column event source -->
<ng-container matColumnDef="caseCreateTimestamp">
<th mat-header-cell *matHeaderCellDef> Case Created </th>
<td mat-cell *matCellDef="let element"> {{element.caseCreateTimestamp | date:'MMM d, y, h:mm:ss a'}}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</table>
</div>
</div>
</div>
In the scss file:
#main-body {
padding-top: 20px;
}
table {
width: 80%;
margin-left: 10%;
}
.search-bar {
margin-top: 20px;
margin-left: 10%;
margin-right: 10%;
position: fixed;
width: 80%;
background: white;
}
.ticket-result {
padding-top: 160px;
}
.filter-card {
margin-left: 10%;
margin-right: 10%;
}
#related-ticket{
margin-left: 10%;
margin-right: 10%;
}
.link {
color: blue;
cursor: pointer;
text-decoration: underline;
}
#button-addon4{
width: 8%
}
// input::placeholder{
// color: black;
// }
.fnt{
color: blue;
}
.json-data {
background: lightgrey;
height: 500px;
overflow: auto;
}
table#t01 {
width: 50%;
background-color: #f1f1c1;
border: 1px solid black;
border-collapse: collapse;
}
#thh, #tdd, #trr {
padding: 15px;
text-align: left;
border: 1px solid black;
}
.tab { margin-left: 110px; }
.filter-box {
width: 27%;
margin-right: 5px;
margin-left: 5px;
}
// .filter-button {
// background: #007bff!important;
// }
.ele {
margin-right: 10px;
}
.filter-tab {
margin: 2% 10%;
border: none;
}
.related-ticket-table {
margin: 2%;
}
.ticket-container {
height: 520px;
overflow: auto;
}
.dates{
margin-left: 25%;
}
.btn-primary{
background-color: #000099;
}
.border-primary{
color: #000099;
}
#button-addon4{
width: 15%
}
#iconSpan {
position : absolute;
top:1%;
left :14%;
}
ts code
import { Component, OnInit, ViewChild } from '#angular/core';
import {FormBuilder, FormControl, FormGroup} from '#angular/forms';
import {MatPaginator} from '#angular/material/paginator';
import { TicketService } from '../../services/ticket.service';
import { Ticket } from '../../models/ticket';
import { TicketDetail } from '../../models/ticket-detail';
import { TicketDetailComponent } from '../ticket-detail/ticket.detail.component';
import { query } from '#angular/animations';
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
ticketList: Ticket[] = [];
originalTicketList: Ticket[] = [];
displayedColumns = ['id', 'findingSourceSystem','label', 'caseStatus', 'caseCreateTimestamp'];
displayedDetailColumns = ['id', 'label', 'findingSourceSystem','caseCreateTimestamp'];
filterAllForm: FormGroup;
allTickets: boolean = true;
labelList: string[];
homeLabelList: string[];
currentTicketId: string;
searchBy: string = '';
#ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
constructor(private ticket: TicketService,
private formBuilder: FormBuilder) { }
ngOnInit() {
this.filterAllForm = this.formBuilder.group({
startDate: [''],
endDate: ['']
});
this.getAllLabels();
this.getAllTicket();
this.getAllUniqueLabels();
}
get filterFormControls() { return this.filterAllForm.controls; }
getAllTicket() {
this.allTickets = true;
let queryParams = '';
console.log(this.currentTicketId) + " " + this.searchBy;
if(this.searchBy === 'id') {
queryParams = 'id=' + this.currentTicketId;
} else if(this.searchBy === 'anchorPoint') {
queryParams = "anchor=" + this.currentTicketId;
}
this.ticket.getAllTicket(queryParams).subscribe((res: Ticket[]) => {
this.ticketList = res;
this.ticketList['paginator'] = this.paginator;
this.originalTicketList = this.ticketList;
});
}
filterAllTicket() {
let startFlag = this.filterAllForm.value.startDate != undefined && this.filterAllForm.value.startDate != "";
let endFlag = this.filterAllForm.value.endDate != undefined && this.filterAllForm.value.endDate != "";
if(startFlag || endFlag) {
let arrays = [];
for(let ticket of this.originalTicketList) {
let ticketStartDate = new Date(ticket.caseCreateTimestamp);
let flag = startFlag && ticketStartDate >= this.filterAllForm.value.startDate;
if(endFlag) {
flag = flag && ticketStartDate <= this.filterAllForm.value.endDate;
}
if(flag) {
arrays.push(ticket);
}
}
this.ticketList = arrays;
}
}
getAllLabels() {
this.ticket.getLabel().subscribe((res: string[]) => {
this.labelList = res;
this.labelList.push("all");
this.labelList.sort();
});
}
getAllUniqueLabels() {
this.ticket.getLabel().subscribe((res: string[]) => {
this.homeLabelList = res;
this.homeLabelList.sort();
});
}
searchTicket() {
this.getAllTicket();
}
}
Initially, I was wondering if the .ticket-container class in the css effected the pagination, I removed, the table going up when I srcolling down. Also, still didn't show pages. This is what I got now. You can see the table can be scrolled down but did't have pages.
You need to place it outside of <table> element as it doesn't have this child element specified.
Replace:
<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</table>
With:
</table>
<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
Related
I use Kendo UI for Angular. In the kendo grid I have a problem:
When I add a new record in the grid show 'valueField' instead textField.
How can I change that and set editable mode when new record appears not when click?
myCode:
<kendo-grid [data]="gridData" [loading]="loading" [navigable]="true"
(cellClick)="cellClickHandler($event)" (cellClose)="cellCloseHandler($event)" [height]="300"
(save)="addAddressRecord($event)" (remove)="removeAddressRecord($event)">
<kendo-grid-column field="isPrimary" editor="boolean" title="اصلی" width="50px">
</kendo-grid-column>
<kendo-grid-column field="title" title="عنوان"></kendo-grid-column>
<kendo-grid-column field="geographicalRegionId" title="منطقه جغرافیایی">
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"
let-formGroup="formGroup">
<kendo-combobox (filterChange)="filterGeographicalRegion($event)" [filterable]="true"
[data]="geographicalRegionId" textField="title" valueField="id"
[valuePrimitive]="true" [formControl]="formGroup.get('geographicalRegionId')">
</kendo-combobox>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="addressString" title="آدرس">
</kendo-grid-column>
<kendo-grid-column field="postalCode" title="کد پستی">
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"
let-formGroup="formGroup">
<input kendoTextBox [formControl]="formGroup.get('postalCode')"
(input)="($event)" />
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="phone" title="تلفن">
</kendo-grid-column>
<kendo-grid-column field="fax" title="فاکس">
</kendo-grid-column>
<kendo-grid-column field="email" title="ایمیل">
</kendo-grid-column>
<kendo-grid-column width="50px">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridRemoveCommand [icon]="'minus-outline'"></button>
<button kendoGridSaveCommand [icon]="'plus-outline'"></button>
</ng-template>
</kendo-grid-column>
</kendo-grid>
plz try this
create a component for dropdown
in HTML
<div [formGroup]='formGroup'>
<button #anchor (click)="toggle()" class="k-button btn-dropdown">{{ selectedKeys }}</button>
<kendo-popup [anchor]="anchor" (anchorViewportLeave)="show = false" class="popup" *ngIf="show">
<kendo-treeview
#tree
class="dropdown-kendo-treeview"
[nodes]="treeData | async"
textField="name"
kendoTreeViewExpandable
kendoTreeViewSelectable
kendoTreeViewHierarchyBinding
[hasChildren]="hasChildren"
[children]="fetchChildren"
[selectBy]="'name'"
[(selectedKeys)]="selectedKeys"
(selectionChange)="handleSelection($event)"
>
</kendo-treeview>
<div #dropdownIconDiv class="dropdown-icon-div">
<button class="m-1 dropdown-icon" kendoButton title="دریافت اطلاع از تغییرات" (click)="refresh()">
<i class="fas fa-redo"></i>
</button>
<button class="m-1 dropdown-icon" title="افزودن موقعیت جدید" (click)="newGeo()" kendoButton>
<i class="fas fa-plus"></i>
</button>
</div>
</kendo-popup>
<input #input kendoTextBox hidden [formControl]="name"/>
In ts file
#Input() name: FormControl;
#Input() formGroup: FormGroup;
#Input() selectedKeys = ['انتخاب ...'];
#ViewChild('anchor', {static: false}) anchor: ElementRef;
#ViewChild('dropdownIconDiv', {static: false, read: ElementRef}) dropdownIconDiv: ElementRef;
#ViewChild('tree', {static: false, read: ElementRef}) tree: ElementRef;
#ViewChild('input', {static: false}) input: ElementRef;
treeData: Observable<any[]>;
show = false;
#HostListener('keydown', ['$event'])
keydown(event: any): void {
if (event.keyCode === 27) {
this.toggle(false);
}
}
#HostListener('document:click', ['$event'])
documentClick(event: any): void {
if (!this.contains(event.target)) {
this.toggle(false);
}
}
constructor(
private geolocationService: GeolocationService,
private notificationService: NotificationService,
private tabService: TabService
) {
}
ngOnInit() {
this.getParentGeo();
this.getEditData();
}
getEditData(): void {
if (this.name.value) {
this.geolocationService.show(this.name.value).subscribe((response) => {
this.selectedKeys = [response.name];
},
(error) => this.errorHandler(error));
}
}
toggle(show?: boolean): void {
this.show = show !== undefined ? show : !this.show;
}
contains(target: any): boolean {
return this.anchor.nativeElement.contains(target) ||
(this.tree ? this.tree.nativeElement.contains(target) : false) ||
(this.dropdownIconDiv ? this.dropdownIconDiv.nativeElement.contains(target) : false);
}
handleSelection(e): void {
this.name.setValue(e.dataItem.id);
this.show = false;
}
newGeo() {
this.tabService.open(new Tab('معرفی موقعیت جغرافیایی', GeolocationComponent));
}
refresh() {
this.getParentGeo();
}
hasChildren() {
return true;
}
getParentGeo() {
this.treeData = this.geolocationService.SubLocations(0);
}
fetchChildren = (item: any) => {
return this.geolocationService.SubLocations(item.id);
};
showAlert(text: string, type: any): void {
this.notificationService.show({
content: text,
animation: {type: 'fade', duration: 400},
position: {horizontal: 'center', vertical: 'top'},
type: {style: type, icon: true},
closable: false,
hideAfter: 3000
});
}
// {ErrorCode,Message}
errorHandler(error: any) {
this.showAlert(error.error.Message, 'error');
}
in scss file
.btn-dropdown {
width: 190px;
justify-content: left;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, #000 50%),
linear-gradient(135deg, #000 50%, transparent 50%) !important;
background-position: calc(10% - 0.78rem) 0.5rem, calc(10% - 0.5rem) 0.5rem;
background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
background-repeat: no-repeat;
}
.popup {
width: 190px;
}
.dropdown-kendo-treeview {
width: 190px !important;
height: 200px !important;
}
.dropdown-icon-div {
border-top: 1px solid #00000029;
height: 50px;
width: 100%;
text-align: left;
}
.dropdown-icon {
width: 30px;
height: 30px;
font-size: 16px;
margin: 10px 5px !important;
}
and usage in grid kendo
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"
let-formGroup="formGroup">
<zino-geolocation-tree-dropdown [formGroup]="formGroup" [selectedKeys]="selectedKeys"
[name]="formGroup.get('geographicalRegionId')"></zino-geolocation-tree-dropdown>
</ng-template>
I am working on a small application that displays a "users" JSON in an HTML5 table. I use Bootstrap 3, Axios and Vue.js 2 for this purpose.
The items displayed are paginated. Here is the code for all that:
var app = new Vue({
el: '#app',
data: {
users: [],
loading: true,
errored: false,
url: "https://randomuser.me/api/?&results=100&inc=name,location,email,cell,picture",
page: 1,
perPage: 10,
pages: [],
},
methods: {
getUsers() {
axios
.get(this.url)
.then(response => {
this.users = response.data.results
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
},
setPages() {
var numberOfPages = Math.ceil(this.users.length / this.perPage);
for (var index = 1; index <= numberOfPages; index++) {
this.pages.push(index);
}
},
paginate(users) {
var page = this.page;
var perPage = this.perPage;
var from = (page * perPage) - perPage;
var to = (page * perPage);
return users.slice(from, to);
}
},
created() {
this.getUsers();
},
watch: {
users() {
this.setPages();
}
},
computed: {
displayedUsers() {
return this.paginate(this.users);
}
},
filters: {
lowercase(value) {
return value.toLowerCase();
},
capitalize(value) {
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
});
.table-container {
margin: 10px;
}
.table-container .panel-heading {
font-weight: bold;
}
.table-container .panel-body {
padding: 0;
}
.table-container table {
margin-bottom: 0;
border: none;
}
.table-container table tr:last-child td {
border-bottom: none;
}
.table-container table tr th {
font-weight: bold;
}
.table-container table tr th:first-child,
.table-container table tr td:first-child {
border-left: none;
}
.table-container table tr th:last-child,
.table-container table tr td:last-child {
border-right: none;
}
.table-container table tr td {
padding: 2px 8px !important;
vertical-align: middle;
}
.table-container table tr td .picture {
padding-right: 10px;
}
.table-container table tr td img {
max-height: 30px;
width: auto;
border: 1px solid #c7c7c7;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app" class="container">
<div class="panel panel-default table-container">
<div class="panel-heading">Users</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="dataTable">
<thead>
<tr>
<th class="text-right">#</th>
<th>Name</th>
<th>Email</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in displayedUsers">
<td class="text-right">{{perPage * (page - 1) + index + 1}}</td>
<td>
<span class="picture">
<img :src="user.picture.thumbnail" :alt="user.name.first + ' ' + user.name.last" class="img-circle">
</span>
<span>{{user.name.first | capitalize}} {{user.name.last | capitalize}}</span>
</td>
<td><a :href="'mailto:' + user.email | lowercase">{{user.email | lowercase}}</a></td>
<td>{{user.location.city | capitalize}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav class="text-center" aria-label="Page navigation">
<ul class="pagination pagination-sm">
<li>
<a href="#" #click="page = 1" aria-label="First">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="#" v-if="page != 1" #click="page--" aria-label="Previous">
<span aria-hidden="true">‹</span>
</a>
</li>
<li v-for="pageNumber in pages.slice(page-1, page+4)" :class="{'active': page === pageNumber}">{{pageNumber}}</li>
<li>
<a href="#" #click="page++" v-if="page < pages.length" aria-label="Next">
<span aria-hidden="true">›</span>
</a>
</li>
<li>
<a href="#" #click="page = pages.length" aria-label="Last">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/axios#0.18.0/dist/axios.min.js"></script>
I have ran into a problem after adding a search/filter functionality to he application. I have added this to the template/view:
<div class="panel-heading clearfix">
<h2 class="pull-left">Users</h2>
<div class="searchbox">
<input type="text" v-model="search" class="form-control" placeholder="Search...">
</div>
</div>
and replaced <tr v-for="(user, index) in displayedUsers"> with <tr v-for="(user, index) in searchResults">.
Then, to computed section of the script the script, I added:
searchResults() {
return this.users.filter((user) => {
return user.name.first.match(this.search);
});
}
The search (through names) works, but neither the entire JSON, nor the search results are paginated.
I have failed to make them work together. The broken application can be seen HERE.
What is missing?
In order to make the pagination work together with the filtering you need to combine the pagination logic with your searchResults in displayedUsers
displayedUsers() {
return this.paginate(this.searchResults);
},
Then you will need to use displayedUsers everywhere where you are interested the combined result, so in your template:
<tr v-for="(user, index) in displayedUsers">
There is one more thing to fix in your code: the number of pages currently always uses the original user count, which has to be updated to use the "current" user count:
setPages(users) {
this.pages.length = 0; //we need to clear the previously set pages
var numberOfPages = Math.ceil(users.length / this.perPage);
for (var index = 1; index <= numberOfPages; index++) {
this.pages.push(index);
}
},
And update the pages whenever the dispayedUsers are changed:
watch: {
displayedUsers() {
this.setPages(this.searchResults);
}
},
If you also want to reset the page when on search you just need to set the page in searchResults
searchResults() {
this.page = 1;
return this.users.filter((user) => {
return user.name.first.match(this.search);
});
}
Working JSFiddle.
I'm using the latest version of Angular and Angular Material. I'm having issues with my components. The page Load like this:
Before de click
And the content just appear when I click on the menu.
After clicking
I already tried to uninstall and install all the meterial stuff. And this issue continues. I have a separate module to import and export all the material components. Here is the code of the component that is using the material tags:
profile.component.ts
import { Component, OnInit } from '#angular/core';
import {AuthService} from "../../services/auth.service";
import {User} from "../../model/model.user";
import {Router} from "#angular/router";
import { Expense } from '../../model/model.expense';
import { ReceiptService } from "../../services/receipt.service";
import { ExpenseService } from './../../services/expense.service';
import { Receipt } from './../../model/model.receipt';
#Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
totalReceita = 0;
totalDespesa = 0;
receipts = []
expenses = []
currentUser: User;
constructor(public authService: AuthService, public router: Router, public receiptService: ReceiptService, public expenseService: ExpenseService) {
this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
}
ngOnInit() {
this.receiptService.getReceipts(this.currentUser.id).subscribe(
data => {
console.log(data)
this.receipts = this.retiraArrayRec(data);
this.somaTudoRec();
}
);
this.expenseService.getExpenses(this.currentUser.id).subscribe(
data => {
this.expenses =this.retiraArrayDesp(data);
this.somaTudoDes();
}
);
console.log(this.receipts)
}
retiraArrayRec(data){
let lista = []
data.forEach(element => {
let receita : Receipt = new Receipt;
receita.name = element[0];
receita.value = element[1]
lista.push(receita);
});
return lista;
}
retiraArrayDesp(data){
let lista = []
data.forEach(element => {
let despesa : Expense = new Expense;
despesa.name = element[0];
despesa.value = element[1]
lista.push(despesa);
});
return lista;
}
somaTudoRec(){
this.receipts.forEach(element => {
this.totalReceita += element.value;
});
}
somaTudoDes(){
this.expenses.forEach(element => {
this.totalDespesa += element.value;
});
}
// login out from the app
logOut() {
this.authService.logOut()
.subscribe(
data => {
this.router.navigate(['/login']);
},
error => {
});
}
}
profile.component.html
<mat-sidenav-container fullscreen class="menu-container">
<mat-sidenav #sidenav>
<mat-nav-list>
<a mat-list-item routerLink="/home" routerLinkActive="active-list-item">
<h2 matLine>Home</h2>
<mat-icon matListIcon>home</mat-icon>
</a>
<a mat-list-item routerLink="/account" routerLinkActive="active-list-item">
<h2 matLine>Receitas</h2>
<mat-icon matListIcon>local_atm</mat-icon>
</a>
<a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
<h2 matLine>Despesas</h2>
<mat-icon matListIcon>show_chart</mat-icon>
</a>
<a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
<h2 matLine>Notificações</h2>
<mat-icon matListIcon>notification_important</mat-icon>
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>
<mat-toolbar>
<button class="hamburger mat-button" mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
<span>Menu</span>
</button>
<span>Bem vindo ao CPF, Pedro</span>
<button mat-icon-button [mat-menu-trigger-for]="menu">
<mat-icon>more_vert</mat-icon>
</button>
</mat-toolbar>
<mat-menu x-position="before" #menu="matMenu">
<button mat-menu-item>
<mat-icon>person</mat-icon>
<span>Perfil</span>
</button>
<button mat-menu-item>
<mat-icon>money_off</mat-icon>
<span>Sair</span>
</button>
</mat-menu>
</mat-sidenav-content>
</mat-sidenav-container>
profile.component.css
mat-toolbar {
background-image: linear-gradient(to bottom, #00b4db, #0083b0);
color: #fff;
justify-content: space-between;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.3);
}
span {
font-size: 16px;
font-weight: 700;
}
.hamburger {
height: 100%;
font-size: 18px;
}
.mat-sidenav-container {
min-width: 400px;
max-width: 100%;
}
.mat-sidenav {
flex: 0 1 auto;
}
.menu-spacer {
flex: 1;
}
.mat-list-item-content {
padding: 0 25px;
}
.menu-container {
min-width: 200px;
max-width: 100%;
}
First, please consider that you need to insert style into the project:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
If it did not solve the problem, I guess it's because you are using another font and also added !important for the font, please try to add the code below in your style.css (or style.scss) which is the general/public CSS file which effects on your whole project:
mat-icon{
font-family: 'Material Icons' !important;
}
I have a div on my ionic 2 page and I want to display and hide it when click , the first part is done (display) I use ngClass to do it but the second part can't do it I think is a logic problem , see the image bellow :
, here is the html code :
<ion-content>
<ion-fab right [ngClass]="isCalendar ? 'show-calendar':'hide-calendar' " (click)="showCalendar();">
<div class="close" (click)="hideCalendar()" [ngClass]="isNotCalendar ? 'hide-Calendar' :'show-calendar'">
<ion-icon class="icon-close" name="ios-close"></ion-icon>
</div>
<p class="day" [ngClass]="isClicked ? 'day-no-click':'day' ">DAY</p>
<p class="month" [ngClass]="isClicked ? 'monthclicked':'month' " (click)="selectMonth()">MONTH</p>
<p class="year">YEAR</p>
<div class="button-date" ion-button round>
<p>. . .</p>
</div>
<div class="Progress" style="transform: rotate(90deg);">
<progress max="100" value="0" class="Progress-main">
<div class="Progress-bar" role="presentation">
<span class="Progress-value" style="width: 80%;"></span>
</div>
</progress>
</div>
</ion-fab>
<ion-fab top left>
<ion-searchbar> </ion-searchbar>
</ion-fab>
<ion-img class="map" [src]="mapsource" (click)="changeView(mapsource)"></ion-img>
<ion-icon class="icon-bonfire" name="ios-bonfire"></ion-icon>
<ion-icon class="icon-heart" name="md-heart"></ion-icon>
<ion-icon class="icon-nuclear" name="md-nuclear"></ion-icon>
<ion-fab top right (click)="showCalendar()">
<button ion-fab color="whitecolor"><ion-icon class="calandaricon" name="md-calendar"></ion-icon></button>
</ion-fab>
<div class="calendar">
</div>
<ion-fab bottom right class="fablocate">
<button ion-fab color="whitecolor"><ion-icon class="locateicon" name="md-locate"></ion-icon></button>
</ion-fab>
<ion-fab (click)="ListParrots();" bottom left class="linklist">
<ion-img class="parrot-list-link" src="img/citydirty.jpg"></ion-img>
</ion-fab>
</ion-content>
and here is the ts file code :
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {ParrotListPage } from '../parrot-list/parrot-list';
/**
* Generated class for the MapPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-map',
templateUrl: 'map.html',
})
export class MapPage {
mapsource :any;
isClicked : Boolean= false;
isCalendar : Boolean=false;
isNotCalendar : Boolean=false;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.mapsource = '../../img/map.jpg';
}
changeView(mapsource){
this.mapsource ='../../img/mapzoom.jpg';
if (mapsource == this.mapsource) {
this.mapsource = '../../img/map.jpg';
}else{
this.mapsource= '../../img/mapzoom.jpg';
}
}
ionViewDidLoad() {
console.log('ionViewDidLoad MapPage');
}
ListParrots(){
this.navCtrl.push(ParrotListPage);
}
showCalendar(){
this.isCalendar = true;
}
hideCalendar(){
this.isNotCalendar = false;
}
selectMonth() {
this.isClicked = true;
}
}
and here is the css
.show-calendar {
height: 100%;
width: 25%;
background-color: color($colors, notification-blue);
margin-right: -10px;
z-index: 1000;
text-align: center;
}
.hide-calendar {
display: none;
}
.close {
width: 50px;
height: 50px;
text-align: center;
background-color: white;
border-radius: 50%;
line-height: 50px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
can some check with the logic and tell how to define exactly the ngClass functionalities?
Try like this :
<button class="btn btn-primary" (click)="showCalendar()">showCalendar</button>
<div [ngClass]="isCalendar ? 'show-calendar':'hide-calendar'">
<h1>Calendar Content</h1>
</div>
and method :
export class Component {
private isCalendar: boolean = false;
showCalendar() {
this.isCalendar = this.isCalendar ? false : true;
}
}
I have an index.html file which looks as follows:
span {
outline: 2px solid black;
}
.wrapped {
outline: 2px solid red;
}
.wrapped span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
<body>
<div class="container">
<table align="center">
<tr>
<th bgcolor="#f0a00c">Col1</th>
<th bgcolor="#f0a00c">Col2</th>
<th bgcolor="#f0a00c">Col3</th>
<th bgcolor="#f0a00c">Col4</th>
<th bgcolor="#f0a00c">Col5</th>
</tr>
<script>var dictionary = {}</script>
{% for b in obj %}
<tr>
<td>{{ b.col1 }}</td>
<td><span class="wrapped"><span>{{ b.col2 }}</span></span></td>
<td>{{ b.col3 }}</td>
<script> if (!dictionary["{{ b.col2 }}"]) {
dictionary["{{ b.col2 }}"] = [];
}
dictionary["{{ b.col2 }}"].push("{{ b.col3 }}");</script>
<td>{{ b.col4 }}</td>
<td>{{ b.col5 }}</td>
</tr>
{% endfor %}
<script>
delete dictionary[""];
console.log(dictionary)
for (var key in dictionary)
{
if (dictionary[key].length > 1) {
var name1 = []
var id = []
for (i in dictionary[key]) {
var reg1 = dictionary[key][i].split("(")[0];
name1.push(reg1);
var reg2 = dictionary[key][i].split("_")[1].match(/[A-Z0-9]*/i);
id.push(reg2[0]);
}
console.log(name1);
console.log(id);
}
}
</script>
</table>
</div> <!-- /container -->
</body>
I'm reading a table from a mysql database which looks like this:
Col2 | Col3 | Col4
1 | Name1(something_1234) | Some_date
1 | Name1(something_3456) | Some_date
2 | Name3(something_7890) | Some_date
2 | Name4(something_0988) | Some_date
The output of dictionary in the above snippet is as follows:
{'1': ['Name1(something_1234)', 'Name1(something_3456)'], '2': 'Name3(something_7890)', 'Name4(something_0988)']}
And name1 and id returns the name part and the id part respectively from col3 for each key, (i.e., ['Name1', 'Name1'] & ['1234', '3456'] for key 1).
Now, I want to know how I could add css on top of the displayed table (kinda like a conditional css, like for all same col2 values add a box around it, then check values of it name parts, if they are same then add a box around them otherwise add separate boxes around then and similarly for the id parts as well), such that I get the following output:
UPDATE: Updated my code above. I'm able to draw box around each Col2 element. But I want to check if col2 cell's value is equal to the previous value then draw box around box together. And how to draw a box only around part of text in the cell i.e., around name and id part in Col3??
Okay but I still don't understand how the box will be created with css/html. Can you show me an example?
Yes, I did something simmilar to your drawing in js fiddle: https://jsfiddle.net/tq0u0876/
Now it's your turn to generate the HTML with a Blade syntax and JS.
HTML:
<table>
<tr>
<td><span class="border-top">1</span></td>
<td>
<span class="border-top">Name1</span>
<span>(something_</span>
<span class="border-top border-bottom">1234</span>
<span>)</span>
</td>
<td><span>some data</span></td>
</tr>
<tr>
<td><span class="border-bottom">1</span></td>
<td>
<span class="border-bottom">Name1</span>
<span>(something_</span>
<span class="border-top border-bottom">3456</span>
<span>)</span>
</td>
<td><span>some data</span></td>
</tr>
<tr>
<td><span class="border-top">2</span></td>
<td>
<span class="border-top border-bottom">Name2</span>
<span>(something_</span>
<span class="border-top border-bottom">7890</span>
<span>)</span>
</td>
<td><span>some data</span></td>
</tr>
<tr>
<td><span class="border-middle">2</span></td>
<td>
<span class="border-top border-bottom">Name3</span>
<span>(something_</span>
<span class="border-top border-bottom">0988</span>
<span>)</span>
</td>
<td><span>some data</span></td>
</tr>
<tr>
<td><span class="border-bottom">2</span></td>
<td>
<span class="border-top border-bottom">Name4</span>
<span>(something_</span>
<span class="border-top border-bottom">7890</span>
<span>)</span>
</td>
<td><span>some data</span></td>
</tr>
</table>
CSS:
.border-top {
border-top: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
}
.border-bottom {
border-bottom: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
}
.border-middle {
border-left: 2px solid;
border-right: 2px solid;
}
table { border-collapse: collapse; }
span { display:inline-block; line-height:26px; margin-bottom:-6px; }
td:nth-child(1) span { border-color:red; min-width:20px; }
td:nth-child(2) span:nth-child(1) { border-color:green; min-width:60px; }
td:nth-child(2) span:nth-child(3) { border-color:blue; min-width:60px; }