Develop Reference

Customizing cell template for week view on Angular Calendar 6+

How to customize cell template for week view? We have necessity of show a popover on segment time clicked (there are more check about this), and i want change the template of [hourSegmentTemplate].
Can you send an example?
Thank you
Edit:
I use this component.
I want to change the default week view, thanks [hourSegmentTemplate] attribute:
<mwl-calendar-week-view
*ngSwitchCase="CalendarView.Week"
[viewDate]="viewDate"
[hourSegmentTemplate]="weekView"
[events]="events"
[refresh]="refresh">
</mwl-calendar-week-view>
<ng-template #weekView let-segment="segment" let-locale="locale">
<div
class="cal-hour-segment"
[class.cal-hour-start]="segment.isStart"
[class.cal-after-hour-start]="!segment.isStart"
[ngClass]="segment.cssClass">
<span class="cal-time">
{{ segment.date | calendarDate:'dayViewHour':locale }}
</span>
This is some custom content
</div>
But the result is
this
I want only the hours on the left, and the possibility to manage a single template's cell.

If you using ng-template, you have access to a context variable isTimeLabel which has a boolean value which describes where the time label is.
This is a solution for your example:
<ng-template #weekView let-segment="segment" let-locale="locale" let-isTimeLabel="isTimeLabel">
<div *ngIf="isTimeLabel">
</div>
</ng-template>

Semantic UI Vue JS on change not working or no fired

I use semantic ui for vuejs from this repo :
repo semantic ui vuewjs
but i cant find how to do something when selectedchanged :
<div class="ui segment">
<sui-dropdown fluid :options="objects" placeholder="Select Symptom" search selection v-model="currSelectedObject.selectedObjectSearch" />
</div>
<sui-segment v-if="currSelectedObject.selectedObjectSearch">
<sui-list divided relaxed>
<a is="sui-list-item" v-for="item in items" >
<sui-list-content>
<sui-list-header>{{item.name}}</sui-list-header>
{{item.desc}}
</sui-list-content>
</a>
</sui-list>
</sui-segment>
what i want to achieve is when sui-dropdown changed, show the sui-segment with v-if = currSelectedObject.selectedObjectSearch and call a function.
untill now i tried this :
<sui-dropdown
fluid :options="objects"
placeholder="Select object"
search
selection
v-on:change="searchObjectBySelected"
v-model="currSelectedObject.selectedObjectSearch" />
v-on:change not fired.
how to call a function when selected changed with semantic ui dropdown for vue js?

You have bound currSelectedObject.selectedObjectSearch using v-model, so when the selected value changes, that variable will change. You should watch it.
watch: {
'currSelectedObject.selectedObjectSearch': function() {
// Do something here.
}
}

How do I add custom icons in kendo UI treeview in angular 5?

I need to add custom icons on either side of the treeview node in Kendo treeview in angular 5. I came across iconClass to add icons but could not get the syntax to add custom icons. Need a way to achieve this

You need to set the node template in order to achieve that level of customization.
Check out in the related page how component is initialized with a ng-template directive:
#Component({
selector: 'my-app',
template: `
<kendo-treeview
[nodes]="data"
textField="text"
kendoTreeViewExpandable
kendoTreeViewHierarchyBinding
childrenField="items"
>
<ng-template kendoTreeViewNodeTemplate let-dataItem>
<span [ngClass]="iconClass(dataItem)"></span>
{{dataItem.text}}
</ng-template>
</kendo-treeview>
`
})

kendo Angular add Class to ng-template

I have a Kendo Grid in Angular, the Grid has some Detailgrid and within I have a GridCellTemplate. I want to add a css class to the ng-template to colorize based on value. But I cannot add.
I tried to add this line to it but giving me an error (working if I add another div inside the ng-template):
class="{{getClass(dataItem,column)}}"
This is my ng-template Code
<kendo-grid-column
field="{{column}}" >
<ng-template kendoGridCellTemplate let-dataItem class="{{getClass(dataItem,column)}}">
value
</ng-template>
</kendo-grid-column>

Multiple clickable icons to PrimeNG TreeNode in Angular2 application

I am developing an angular2 application using PrimeNG. I have a tree view and in certain scenarios I need to add more than one icon to specific tree node. Any help on this is appreciated.
Example:
Icon TreeNode1
Icon1 Icon2 TreeNode2
I want the icons to be clickable so that I can perform actions like showing tooltips or show popup dialog etc...
Open on suggestions regarding any other technology that can be used to achieve above funtionality

I was looking for something related and found your question right now.
To add multiple icons to a branch (or leaf) of the tree you need to make your own templates for each type of TreeNode.`
<ng-template let-node pTemplate="group">
<i class="fa fa-bolt" (click)="doSomething('do lighting stuff')></i>
<span>{{node.label}}</span>
</ng-template>
<ng-template let-node pTemplate="node">
<i class="fa fa-signal" (click)="doSomething('do signal stuff')></i> <i class="fa fa-info" (click)="doSomething('do info stuff')></i>
<span>{{node.label}}</span>
</ng-template>
`
Check here the TreeNode interface https://github.com/primefaces/primeng/blob/master/src/app/components/common/treenode.ts