I am angular 5 in my test application with #progress/kendo-angular-grid, i am trying to displaying group title. like Unit Price: 10, only i need to display 10.
as per kendo documentation example only i working can you please help me on that.
link:
https://www.telerik.com/kendo-angular-ui/components/grid/grouping/grouping/
above link show unit price: 10 , i want remove 'unit price:', only i need to display 10 .
You can customize the group-header by nesting a ng-template with the kendoGridGroupHeaderTemplate directive within the kendo-grid-column tag.
<kendo-grid ...>
<kendo-grid-column ...>
<ng-template kendoGridGroupHeaderTemplate>
<!-- Custom content here -->
</ng-template>
</kendo-grid-column>
</kendo-grid>
More detailed information can be found in the API Reference.
I've also created an example based on your description.
Related
I have an angular project I am developing using angular material for a slide toggle and text fields, and cdk drag and drop for drag and drop functionality. I am pretty new to angular libraries and angular in general.
I have run into an issue where the slide toggle is only toggling the first element inside an *ngFor loop. I have tried adding a let i = index to the ngFor and it is always passed as 0 no matter which toggle you select, however if I place {{ i }}, it will show up as the correct index. I am at a loss.
https://stackblitz.com/edit/angular-yezv9a
If you go to the project at that link, and toggle the test 2 or 3 toggle, it will shift the first 1 and I can not seem to figure out why
Any help is appreciated
If I understand you correctly, There is one issue in your code is mat-slide-toggle element has an id which is repeating in ngFor
<mat-slide-toggle id="toggle" color="primary" (change)="onToggle(button)" [checked]="button.enabled"></mat-slide-toggle>
I removed the id attribute and found working correctly, based on my understanding you can find a fork of working example in below url
https://angular-yezv9a-bac1jz.stackblitz.io/
Make the id attribute as empty
Will work as expected
I want to bold some contents in the popup. But is not interpreted instead is being displayed among the content
Is there any other way, leaving matToolTip to provide popup over hover in Angular
<button [matTooltip]="help|translate" type="button" mat-button class="button-save" [disabled]="!isInfoAvailable">
<mat-icon>help_outline</mat-icon>
</button>
Expected output
firstname mike
lastname ross
Actual output
<b>firstname <\b> mike <\n>
<b>lastname <\b> ross
I think native Angular Material Tooltips don't allow HTML code, so I suggest you to use an other provider for the Tooltips, there are a lot of those who allows HTML code like ng-bootstrap or tippy.js
I personally suggest you to use Tippy.js, here's the link where you can see how use HTML code on it.
https://atomiks.github.io/tippyjs/#html-content
Hope it helps you.
If you need simple customization (changing background-color, color, font-size...) for the whole tooltip you can read this post otherwise you can read this answer ⬇️
A similar post already exists: Angular 2 Material tooltip with HTML content in angular
What you are looking for is a Popover. And as said, it doesn't exist now and it's not possible with tooltips.
Answer from #jelbourn, Angular member team:
When designing the tooltip we deliberately decided not to support
this. The Material Design spec is rather prescriptive about only text
appearing in tooltips. Rich content also presents a challenge for
a11y.
Source: https://github.com/angular/components/issues/5440#issuecomment-313740211
You can find the feature request for popover here.
Until an official release from Material team you can use an alternative. Here are some examples:
https://github.com/joejordanbrown/popover (documentation here)
https://github.com/ncstate-sat/popover
https://github.com/maxisam/ngx-mat-popover (using Material Menu)
https://ng.ant.design/components/popover/en (ng-zorro lib)
In Angular 4, using [ngTemplateOutlet] I am able to refer to different html templetes() defined inside the same HTML page using its id. But how do I load an externally defined HTML page conditionally within the one component's html.Code snippet Below:
main.component.html
<div *ngIf="page == 'test'">
<ng-template [ngTemplateOutlet]="test"></ng-template>
</div>
<ng-template #test>
<b>test template</b>
</ng-template>
Component code snipper:
main.component.ts
if(this.router.url == "/test"){
this.page = "test";
}
Above Code works, but I'm looking for is when I have my 'test' template as an external html file(test.html), how do I refer test.html in main.component.html, as I need to refer to couple of such html pages inside main.component.html conditionally. I do not want to have them as separate components(as suggested in many Docs) as I need only html and the logic remains same for all in my main.component.ts. I just need to load different views in the same main.component
test.html
<ng-template>
<b>test template</b>
</ng-template>
Thanks in advance!
I am new to ng-templates. I have successfully made it so each column correctly represents each name, but was trying to add a title field to each one so that a tooltip will hover with the full name incase the name is larger than the data cell. The name field is part of a p-datatable...CRUD version.
Thanks!!! Below is a code snippet.
<p-column field="name" header="Name" [sortable]="true" >
<ng-template let-con="rowData" title="rowData" >
<span title="rowData"></span>
</ng-template>
</p-column>
Well, I have no idea what p-datatable is, but normally data binding is done using property binding with square brackets like this:
[title] = "rowData"
Where "rowData" is a property of your component class.
title="{{rowData}}" (change it in your span tag) should do the trick!
I´m trying to use the attribute appendTo in the component ContextMenu, but I want attach the behavior to one element, like a div.
on the element u want to append to add a hashtag #myHashTag
and on the prime element u want to append add:
[appendTo]="myHashTag" <- without the # sign
example:
<div class="recording-control-button" #stopbutton></div>
<p-confirmDialog [appendTo]="stopbutton"></p-confirmDialog>
I'm presuming you're using Angular 2?
Based on the information on the api for primeng context menu here:
PrimeNg context menu
You need to use a Angular 2 template variable, see here:
Angular 2 HTML variables
I try this and it works - [appendTo]="'body or template or any Id'"
For example:
<div #largeModal></div> - define anywhere in html, but in your project
Define this menu primeng in your html
<ng-template let-item="rowData" <p-menu #menu popup="popup" [model]="items"></p-menu> <button type="button" pButton icon="fa fa-list" label="Show" [appendTo]="'largeModal'" (click)="menu.toggle($event)"></button> </ng-template>