I am struggling with styling ng-template tag.
what i have tried in my .css file until now:
using #other_content as ID in my .css file
adding a class to <ng-template>
styling all <td> tags
It's not working and after searching i have not found any solution.
HTML:
<div class="cont">
<div class="scolldiv">
<table border="1">
<thead>
<tr>
<th>Char</th>
<th>Break After</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let charobj of Chars;let i = index" [attr.data-index]="i">
<td>{{charobj.char}}</td>
<td class="tdcell" *ngIf= "charobj.after; else other_content">YES</td>
<ng-template #other_content>NO</ng-template>
<td>
<MyBtn
[ID]="'btnaddchars_' + i"
[BackColor]= "globals.sysButtonBackColor"
[Color]= "globals.sysButtonForeColor"
[HoverBackColor] = "globals.sysHoverButtonBackColor"
[HoverColor] = "globals.sysHoverButtonForeColor"
[Text] ="'Delete'"
[SecondText]="'Close'"
[Width] ="'70px'"
[Height]="'17px'"
(buttonWasClicked) ="onSymbolsFormButtonClick($event)"
>
</MyBtn>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Image:
Since the tag <ng-template> is converted into bindings when DOM is rendered something like this
<!--bindings={
"ng-reflect-ng-if": "false",
"ng-reflect-ng-if-else": "[object Object]"
}-->
Try to give a class(CSS class) to your text example:
<ng-template #other_content>
<label class='_YOUR CSS CLASS_'>No</label>
</ng-template>
Related
I want my ngbpopover to appear at the top of the parent element as it is appearing below the parent element. I had put container="body" in ngbpopover that fix the given issue but somehow the external css is not appearing that I had defined in ng-template.
<mat-tab-group animationDuration="0ms">
<div *ngFor="let sampleData of sampleDataInfo[j]; let i=index">
<mat-tab label="{{targetData[j][i].fullName}}">
<table class="source-target-Info-table">
<tr class="source-target-Table">
<th><img data-toggle="tooltip" data-placement="bottom" title="Sub1"></th>
<th>row2</th>
<th>row3</th>
<th>row4</th>
<th>row5</th>
<th>row6</th>
<th>row7</th>
<th>row8</th>
<th>row9</th>
<th>row10</th>
</tr>
<tr *ngFor="let target of targetData[j][i].files; let file=index">
<td>
<a class="info-link" href="javascript:;" title=" Log-{{sampleData?.sessionId}}" (click)="openDexLog(j,i)">
{{(1)}}
</a>
</td>
<td *ngIf="target.qualityLevel > 0; else negativeQuality">
**<a class="info-link" href="javascript:;" title="Click to see Quality result files" href="javascript:;" placement="top-left" popoverClass="popover-class" [ngbPopover]="popContentQuality" container="body">{{target.qualityLevel}}</a>**
</td>
**
<ng-template class="quality-popover" #popContentQuality>**
<h1 class="quality-heading">Quality Results for</h1>
<h3 class="file-name">{{target.name}}</h3>
<table class="source-target-Info-table">
<tr class="source-target-Table">
<th>FILE NAME</th>
<th>SIZE</th>
<th>DESCRIPTION</th>
</tr>
<tr *ngFor="let tq of tqData; let i=index">
<td>
<a class="info-link" href="javascript:;">{{tq.name}}</a>
</td>
<td>{{tq.size/1000}} KB</td>
<td>{{tq.description}}</td>
</tr>
</table>
</ng-template>
</tr>
</table>
</mat-tab>
</div>
</mat-tab-group>
It is only taking the css if is defined in inline format ( using style). Is there any to make the external css working when container="body" for ngbpopover in ng-template? I had also tried to define the external css in the component that consist of body tag but that doesn't work for me. Any suggestions regarding this will be helpful.
Probably styles incapsulated in :host selector. Input container="body" makes you tooltip content not inside host component.
Whats up! I have a question - maybe banal, maybe not. I need to remove the HTML code to a file after generating it in the component. And everything would be cool, if not for the fact that if I do it
document.getElementById ('summary').outerHTML
or
this.summaryReport.nativeElement.innerHTML
I`ve
#ViewChild('summaryReport') summaryReport: ElementRef;
html:
<div #summaryReport id="summary" class="summary">
<div class="row border border-secondary">
<div class="col-md">
<h2> Podsumowanie sprzedaży biletów </h2>
</div>
</div>
<div class="row">
<ng-container *ngFor="let d of sortedData |keyvalue">
<div class="row">{{d.key}}</div>
<div class="col-md">
<table class="table">
<thead>
<th>{{'Ticket name'|translate}}</th>
<th>{{'Price'|translate }}</th>
<th>{{'Quantity'|translate}}</th>
</thead>
<tbody>
<tr *ngFor="let el of d.value">
<td>{{el.ticketName}}</td>
<td>{{el.price / 100}}</td>
<td>{{el.quantity}}</td>
</tr>
</tbody>
</table>
</div>
</ng-container>
</div>
</div>
</div>
in the verse I get 'bindings = {}' in place of ngFor.
Can anyone tell me what I do not understand?: D
I`ve answer.
Time....
I'm trying to generate a variable too quickly. After added another method to send html , work fine
I'm using Angular2-Collapsible for my project. On clicking the table row, I want the details to be displayed. The code is attached below. Basically if I add [detail]= "detail1" then the collapsible-table-row-detail would be displayed on click. But since I'm using a for loop, I have to use the variable i. I've tried [detail]= "'detail'+i" and [attr.detail]= "'detail'+i". Nothing seems to be working.
<collapsible-table [type]="'accordion'" borderedVertically="true" class="table">
<thead class="table-heading">
<collapsible-table-row>
<th></th>
<th>Reference ID</th>
<th>Order ID</th>
<th> OName</th>
<th>FP</th>
<th>SP</th>
<th>Stat</th>
<th>date</th>
</collapsible-table-row>
</thead>
<tbody>
<collapsible-table-row *ngFor="let detail of details; let i = index" [attr.data-index]="i" [detail]="'detail'{{i}}">
<td><div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</td>
<td (click)="showFirst=!showFirst"><i class="material-icons" *ngIf="showFirst"><span class="bulleticon"> - </span></i><i class="material-icons" *ngIf="!showFirst"><span class="bulleticon"> + </span> </i>{{detail.Reference_Id}}<br></td>
<td> {{detail.OId}} </td>
<td>{{detail.OName}}</td>
<td>{{detail.FP}}</td>
<td>{{detail.SP}}</td>
<td>{{detail.Stat}} </td>
<td>{{detail.date}}</td>
</collapsible-table-row>
<collapsible-table-row-detail #detail1 class="hidden-table">
<div class="container">
<div class="list col-5">
<span class="heading"> Order details </span>
<ul class="unorderedlist">
<li> data1 </li>
<li> data2 </li>
<li> data3</li>
</ul>
</div>
</div>
</tbody>
</collapsible-table-row-detail>
Thanks in advance!
Edit: Here's a stackblitz implmentation of what I'm trying to acheive. I've used [detail]= "detail1" for demo purposes. But I need to use a variable "i" in the for loop.
Visit https://stackblitz.com/edit/angular-fw5upv.
Try using
[detail]=" 'detail' + i "
Or
detail="detail{{i}}"
Try this:
<tbody>
<ng-container *ngFor="let detail of details; let i = index" >
<collapsible-table-row [attr.data-index]="i" [detail]="detail1">
<td>
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</td>
<td >6565</td>
<td> {{detail.oid}} </td>
<td>{{detail.pname}}</td>
<td>{{detail.price}}</td>
<td>{{detail.qoh}}</td>
</collapsible-table-row>
<collapsible-table-row-detail #detail1 class="hidden-table">
<div class="container">
<div class="list col-5" >
<span class="heading"> Order details </span>
<ul class="unorderedlist">
<li> data4 </li>
<li> data5</li>
<li> data6 </li>
</ul>
</div>
</div>
</collapsible-table-row-detail>
</ng-container>
</tbody>
You can check in your stackblitz just replace the html code.
You could try using a method in your HTML like:
[detail]="getDetail(i)"
And then in your ts file:
getDetail(i: number) {
return 'detail' + i;
}
I have not tried this myself, so I'm not sure if it will work.
While clicking date picker icon it navigates to the bottom of the table.because it's not fit to the td tag,
So it searching for next parent div tag.The next div tag is a table.So it navigates to the bottom of the table. any solution for that.
Actually, after clicking the icon, it navigates to the bottom. Again I need to scroll up to see the date picker
After click icon
after i need to scroll up to see the date picker
HTML:
<div class="row grid-main m-0">
<div class="col-md-12">
<div class="grid-table table-responsive">
<table class="table">
<thead>
<tr>
<th> {{'911_LBL_MONTH' | translate}}</th>
<th>{{'911_LBL_FRMDATE' | translate}} <sup class="required">*</sup></th>
<th>{{'911_LBL_TODATE' | translate}} <sup class="required">*</sup></th>
<th>
<sortable-header [headerText]="'911_LBL_UPDATEDBY'" [sortField]="'ModifiedBy'" [items]="applicationdetail" (changeCurrentSortField)="changeCurrentSortField($event)"
[currentSortField]="currentSortField"></sortable-header>
</th>
<th>
<sortable-header [headerText]="'911_LBL_LASTUPDATED'" [sortField]="'ModifiedDate'" [items]="applicationdetail" (changeCurrentSortField)="changeCurrentSortField($event)"
[currentSortField]="currentSortField"></sortable-header>
</th>
<th class="text-center">{{'911_LBL_APPCOUNT' | translate}} </th>
</tr>
</thead>
<tbody>
<ng-template [ngTemplateOutlet]="tmpltTbl"
[ngTemplateOutletContext]="{ $implicit: itm, idx: i }"></ng-template>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<ng-template #tmplt let-item>
<tr *ngFor="let item of applicationdetail; let i = index">
<td>{{montharray[i] | translate}}</td>
<td *ngIf="item.FromDate">
<div>
<app-date [inputDate]="item.FromDate" [index]="i"
(emitDate)="assignFromDate($event,i)"
[minDate]="minDate[i]"
[maxDate]="maxDate[i]"
[isDisabled]="item.DisablePassedFromDate"
controlName="FromDate{{i}}"
[isConditional]="true"></app-date>
</div>
</td>
<td *ngIf="item.ToDate">
<div>
<app-date [inputDate]="item.ToDate" [index]="i"
(emitDate)="AssignToDate($event,i)"
[minDate]="toMinDate[i]"
[maxDate]="toMaxDate[i]"
[isDisabled]="item.DisablePassedToDate || item.FromDate==null"
controlName="ToDate{{i}}"
[isConditional]="true"></app-date>
</div>
</td>
<td> {{isEnglish ? item.ModifiedBy : item.ModifiedBy_AR}} </td>
<td>{{item.ModifiedDate}}</td>
<td class="text-center"><button type="submit" class="btn btn-primary btn-radius" (click)="openDialog(this.item,i)" data-backdrop="static" data-toggle="modal" data-keyboard="false" data-target="#myModal" value="submit" title="{{'CMN_BTN_MANAGETITLE' | translate}}">{{'911_LBL_MANAGE' | translate}} </button></td>
</tr>
</ng-template>
Thanks in advance
So it searching for next parent div tag.The next div tag is a table.So it navigates to the bottom of the table. any solution for that.
As I understand you find, that problem in the parent div tag, that is far away from your datepicker showing place.
So you can add second parent div where you want it.
For example:
<div style="position: relative;">
<div style="position: relative;">
<app-date [inputDate]="item.FromDate" [index]="i"
(emitDate)="assignFromDate($event,i)"
[minDate]="minDate[i]"
[maxDate]="maxDate[i]"
[isDisabled]="item.DisablePassedFromDate"
controlName="FromDate{{i}}"
[isConditional]="true"></app-date>
</div>
</div>
Don't forget to try with position: relative; - It also can be reason of problem.
Link
Heres the website containing the full html rendered Link
Here's my code:
<template name="activeOrderTable"><table class="table">
<thead>
<tr>
<th>Commodity</th>
<th>Quantity</th>
<th>Price (High Quality Metal)</th>
<th>Order Type</th>
<th>Merchant</th>
<th>Location</th>
<th>Date Added</th>
</tr>
</thead>
<tbody>
{{#each activeOrders}}
<tr>
<td>{{prettifyCommodity commodity}}</td>
<td>{{quantity}}</td>
<td>{{price}}</td>
<td>{{prettifyOrderType orderType}}</td>
<td>{{merchant}}</td>
<td>{{location}}</td>
<td>{{prettifyDate createdAt}}</td>
<td><button type="button" class="btn btn-danger btn-xs" data-id="{{_id}}"><span class="glyphicon glyphicon-remove-sign"></span></button></td>
</tr>
{{else}}
<h3>You have no active orders</h3>
{{/each}}
</tbody>
</table>
I would like to center the You have no active orders
I've tried class text-center but its not working.
Your H3 element is inside the table so the browser is trying to 'fix it'.
You should wrap your H3 tag in <tr><td colspan="6"><td></tr> tags and then apply class="text-center" to H3
Just add a text-center class on your h3 tag directly, not on it's parent divs like this:
{{else}}
<h3 class="text-center">You have no active orders</h3>
{{/each}}
Here's a jsfiddle with the above codes: http://jsfiddle.net/AndrewL32/65sf2f66/26/
You must try applying vanilla CSS to the above code.
table.table h3 {
text-align:center;
}