Develop Reference

How an i change the pagination-control numbers(1 2 3) to other values like 'Anything1 Anything2 ...' using ngFor* on array in ngx-pagination?

Is it possible to replace ngx-pagination's 'pagination-control'? By defaults, page numbers are showing like '1 2 3'. And I want to replace them with a string value in the array.
<pagination-controls (pageChange)="pageChange($event)" class="my-pagination"></pagination-controls>
The above code will display pagination numbers like
I want to replace the number with values from an array [Anything1, Anything2, Anything3].
Here my data is fixed and I know my page number count and its details.

You need to have look at custom template of ngx-pagination. In customization part you may try to add your Anything before {{page.label}}.
Custom Template example can be found here. http://michaelbromley.github.io/ngx-pagination/#/custom-template
<pagination-template #p="paginationApi"
[id]="config.id"
(pageChange)="config.currentPage = $event">
<div class="custom-pagination">
<div class="pagination-previous" [class.disabled]="p.isFirstPage()">
<a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
</div>
<div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
<a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
<span>Anything{{ page.label }}</span>
</a>
<div *ngIf="p.getCurrent() === page.value">
<span>Anything{{ page.label }}</span>
</div>
</div>
<div class="pagination-next" [class.disabled]="p.isLastPage()">
<a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
</div>
</div>
</pagination-template>

How to use limitTo filter dynamically to display long texts

I have a directive that generate a data-table.
I have to make a column in this data-table show a limit text, so I want a link that show the full text when I click on the link. Something like 'more or less'.
I have this code below. I believe the code is right, I get this solution here
<tbody ng-init="limit = 10; showed = false">
<tr ng-repeat="row in dataPaginated | orderBy: orderDefinitions">
<td ng-repeat="column in columns | orderBy: 'id'" ng-style="{ 'white-space' : (column.nowrap) ? 'nowrap !important' : 'normal' }"
ng-show="column.checked">
<div ng-if="column.isRichText">
<!-- I've already tried initiate the limit and showed variables here -->
<div >
{{ row[column.mapProperty] | limitTo : limit }}
<a ng-if="column.isRichText" ng-show="row[column.mapProperty].length > limit" href
ng-click="limit = row[column.mapProperty].length ; showed = true">more</a>
<a ng-if="column.isRichText" ng-show="showed" href
ng-click=" limit=10"> less</a>
</div>
</div>
<div ng-if="">
<!-- When the column isn't richText -->
</div>
</td>
</tr>
</tbody>
But it isn't working, The link more appear and when I click the limit is updated but the full text and the link less is not showed.

Add styles to function-returned data

I'm trying to add CSS styles to a string computed in Javascript. It goes through a series of transformation functions:
var fieldSetTransformation = setFieldTransformation(iteration);
fieldSetTransformation = stylePropertyName(fieldSetTransformation);
This value then is passed to a table generated in a directive through AngularJS's ng-repeat:
<tbody class="tableBody">
<tr ng-repeat="line in linesArray">
<td ng-repeat="column in ::columns" width="{{::column.width}}" ng-class="{
'center-text' : (!line[column.key] || line[column.key].length === 0)
}">{{line[column.key] !== undefined ? line[column.key] : '--'}}<span ng-if="column.key == 'user'">
<i id="plus-icon-styling"
class="fa fa-plus-circle action-icon">
</i>
</span>
</td>
</tr>
</tbody>
So I'm struggling to append it to an existing container.
What I have tried so far?
Injecting the HTML directly into the returned value:
var htmledField = [
'<span class="propertyNameHighlight">' + fieldSetTransformation,
'<span>'].join("\n");
];
No use, since this does not seem to be accepted anymore by current navigators (correct me if wrong) since it's a security issue.
The thrown result is just <span class="propertyNameHighlight">000000</span>
appearing in the table.
Creating the element, then appending it in the view
Also a no-go:
function stylePropertyName(data){
var newSpan = document.createElement('span');
newSpan.setAttribute('class', 'propertyNameHighlight');
document.getElementsByClassName("tableBody").appendChild(newSpan);
newSpan.innerHTML = data;
return data;
}
This returns a null function exception.
I have also checked this question, which seemed the closest to my query, but in my case there is no clear container neither to wrap up the resulting string.
TL;DR: What I'm trying to achieve?
This green text over here:
That represents a cell. The data is not directly passed, it's generated dynamically through a series of functions and ng-repeats.
Any help or related disregarded question that I could get is greatly appreciated. Thanks!

As suggested by commenter Stanislav Kvitash (thanks!), I solved this by using ngBindHtml :
<tbody class="tableBody">
<tr ng-repeat="line in linesArray">
<td ng-repeat="column in ::columns" width="{{::column.width}}" ng-class="{'center-text' : (!line[column.key] || line[column.key].length === 0)}">
<span ng-bind-html="line[column.key] !== undefined ? line[column.key] : '--'"></span>
<span ng-if="column.key == 'user'">
<i id="plus-icon-styling"
class="fa fa-plus-circle action-icon">
</i>
</span>
</td>
</tr>
</tbody>

How to disable NgbTooltip if tooltip template is empty, in Angular2?

I'm showing an array of data inside a tooltip, so I used a template. My code looks like:
<ng-template #ToolTipTemplate>
<small *ngFor="let month of data.months; let first = first; let last = last"> {{ month.appliedMonthYear | utc | date:'MM/y' }}{{ last ? '' : ', ' }} </small>
</ng-template>
<span [ngbTooltip]="ToolTipTemplate">Months: {{data.months.length}}</span>
If data.months is empty I do not want the tooltip to appear. Currently if it's empty it shows the tooltip arrow only.
I've tried adding an *ngIf on the <small> tag inside the template, but that didn't work. I've also tried adding *ngIf into <ng-template> to no avail.

Ok, I was finally able to figure it out. Here's what I had to do
<span [ngbTooltip]="(data.months?.length) ? ToolTipTemplate : ''">Months: {{data.months.length}}</span>

You can take the element reference like #t="ngbTooltip" and then manually fire the tooltip. In your case fire it if required or don't show the tooltip at all.
<div
[ngbTooltip]="(data.months?.length) ? ToolTipTemplate : ''"
triggers="manual"
#t="ngbTooltip"
(mouseenter)="(data.months?.length) && t.open()"
(mouseleave)="t.close()">
show Tooltip
</div>

You can disable it with
<span [ngbTooltip]="ToolTipTemplate" [disableTooltip]="true">Months: {{data.months.length}}</span>
See docs for more info: https://ng-bootstrap.github.io/#/components/tooltip/api

Simple way of doing is
<div *ngIf='data.months.length > 0'>
<ng-template #ToolTipTemplate>
<small *ngFor="let month of data.months; let first = first; let last = last"> {{ month.appliedMonthYear | utc | date:'MM/y' }}{{ last ? '' : ', ' }} </small>
</ng-template>
<span [ngbTooltip]="ToolTipTemplate">Show Info</span>
</div>
<div *ngIf='data.months.length === 0'>
<span>Show Info</span>
</div>

You can use disableTooltip input attribute.
https://ng-bootstrap.github.io/#/components/tooltip/api

How to select the right Id when clicked?

I am displaying users in a list with their photo, name etc... and then I am grabbing the value of the element that has the id "uid" :
$scope.toUserView = function() {
var uid = document.getElementById('userUID').textContent;
console.log(uid);
$state.go('tab.userview');
};
Problem is that whoever I click on, I always get the reference of the FIRST user in the list of the page and I would like to grab only the one I click on.
I tried to add .click() at the end of my var but it is not a function.
Any idea ?
EDIT : Corresponding HTML :
<ion-list class="item-border-off list-fav">
<a ><ion-item ng-click="toUserView()" ng-repeat="user in users" class="item-remove-animate item-avatar">
<img ng-src="{{user.photoURL}}">
<h2>
{{user.name}}
</h2>
<p >{{user.description}}</p>
<p id="userUID">{{user.uid}}</p>
<!-- button options -->
<ion-option-button>
<i class="icon ion-ios-trash-outline"></i>
</ion-option-button>
<ion-option-button>
<i class="icon ion-ios-chatbubble-outline"></i>
</ion-option-button>
</ion-item></a>
</ion-list>

Corresponding HTML
<a ><ion-item ng-click="toUserView($index)" ng-repeat="user in users" class="item-remove-animate item-avatar">
<img ng-src="{{user.photoURL}}">
<h2 id={{user.uid}}>
{{user.name}}
</h2>
<p >{{user.description}}</p>
<p id="userUID{{$index}}">{{user.uid}}</p>
<!-- button options -->
<ion-option-button>
<i class="icon ion-ios-trash-outline"></i>
</ion-option-button>
<ion-option-button>
<i class="icon ion-ios-chatbubble-outline"></i>
</ion-option-button>
</ion-item></a>
JS
$scope.toUserView = function(ind) {
var uid = document.getElementById('userUID'+ind).textContent;
console.log(uid);
$state.go('tab.userview');
};

You seem to repeat the <p id="userUID"></p> in a loop.
id attributes should be unique to a page by definition.
document.getElementById('test') returns the first element having the id attribute set to test.
You should either add something unique to your ids, or use class="userUID" instead.