I want to create timeline view in my project (Angular 9). I use the vis-timeline package for this purpose. I don't want to create HTML manually for item template, I want to use ng-template instead, but can not set ng-template as item template.
var options = {
editable: true, // true or false
template: (item, element, data) => { } // How set ng-template?
};
Here is my Stackblitz code:
https://stackblitz.com/edit/angular-9-starter-xjykf3?file=src/app/custom-template/custom-template.component.ts
vis-timeline itemTemplates example (Create HTML manually)
vis-timeline itemTemplate document
Related
I'm using Angular 10, on click the following function is executed to preform direction change:
private changeHtmlDirection(direction: 'rtl' | 'ltr') {
document.getElementsByTagName("html")[0].dir = direction;
}
It works well, only that the Angular CDK does not update.
I tried to find an API to change Angular CDK's direction at runtime, but couldn't find any.
I saw that there's a BidiModule but it uses only to get the current direction rather than set it.
Is there any solution?
According to the material documentation, you can't change 'dir' on the "html" tag so that affects bidi API. You can see the document at the following link:
bi-directionality document
But if you want to use material bi-directionality you can add the 'dir' directive to a container element in the root component like bellow:
<div [dir]="documentDirection"> </div>
and whenever the 'documentDirection' variable changes, the bidi "change emitter" will be emit.
like following code you can subscribe to it:
constructor(
private dir: Directionality ) {
this.isRtl = dir.value === 'rtl';
this.dir.change.subscribe(() => {
this.isRtl = !this.isRtl;
});
}
I'm using the Forge Viewer to display properties on selected items in my model.
When an object is selected, I want to automatically show the properties panel but keep a category collapsed. Here's the code I'm using in an attempt to achieve this:
viewer.addEventListener(
Autodesk.Viewing.SELECTION_CHANGED_EVENT,
() => {
const panel = viewer.getPropertyPanel();
panel.setVisible(true);
panel.setCategoryCollapsed("Category Name", true);
},
);
The event is raised and the panel is shown, however, the function setCategoryCollapsed does not work (understandable as it was last documented in v5). Is there a similar function in v7 to collapse a category?
That function expects an object with name and type properties - e.g. if I wanted to collapse the "Graphics" category, I could do it like this:
const panel = viewer.getPropertyPanel();
panel.setVisible(true);
panel.setCategoryCollapsed({name: "Graphics", type: "category"}, true);
Have also just written a blog post about it now: Collapse category in the Property Panel
Navigator contains a feature where users can define their own table views, see DAML docs for Navigator.
Is it possible to create a view where one column renders a button that, when clicked, immediately exercises a choice?
Yes, this is possible. The customized views allow you to render arbitrary React components, so let's create one to exercise a choice.
First, start with a working frontend-config.js file. The DAML quickstart project contains one.
Then, make sure you import at least the following symbols at the top of the file:
import React from 'react';
import { Button, DamlLfValue, withExercise } from '#da/ui-core';
Then, define the following top level values (for example, just below export const version={...}):
// Create a React component to render a button that exercises a choice on click.
const ExerciseChoiceButtonBase = (props) => (
<Button
onClick={(e) => {
props.exercise(props.contractId, props.choiceName, props.choiceArgument);
e.stopPropagation();
}}
>
{props.title}
</Button>
)
ExerciseChoiceButtonBase.displayName = 'ExerciseChoiceButtonBase';
// Inject the `exercise` property to the props of the wrapped component.
// The value of that property is a convenience function to send a
// network request to exercise a choice.
const ExerciseChoiceButton = withExercise()(ExerciseChoiceButtonBase)
ExerciseChoiceButton.displayName = 'ExerciseChoiceButton';
Finally, use the following code in your table cell definition:
{
key: "id",
title: "Action",
createCell: ({rowData}) => {
// Render our new component.
// The contract ID and choice argument are computed from the current contract row.
return ({
type: "react",
value: <ExerciseChoiceButton
title='Transfer to issuer'
contractId={rowData.id}
choiceArgument={
DamlLfValue.record(undefined, [
{label: 'newOwner', value: DamlLfValue.party(DamlLfValue.toJSON(rowData.argument).issuer)}
])
}
choiceName='Iou_Transfer'
/>
});
},
sortable: true,
width: 80,
weight: 3,
alignment: "left"
}
Another option would be create a React component where the onClick handler sends a REST API request using fetch(). Inspect the network traffic when exercising a choice through the Navigator UI in order to find out the format of the request.
How to add a angular html element into a component in run time.
Let the html element is a H1 tag having angular expression.
<h1>{{testHeading}}</h1>
I want to insert this tag into a component. With persisting it's dynamic angular property.
Here "testHeading" is a angular variable.
Am trying to add the element using the following method:
addComponent(component:any){
let componentRef = this.componentFactoryResolver
.resolveComponentFactory(component)
.create(this.injector);
this.appRef.attachView(componentRef.hostView);
const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
.rootNodes[0] as HTMLElement;
var newcontent = document.createElement('div');
newcontent.innerHTML = `<h1>${this.demoText}</h1>`;
domElem.appendChild(newcontent);
document.getElementById("testid").appendChild(domElem);
}
Create a container in your template
<div #container></div>
Create a container reference by
ViewChild('container') container: ElementRef;
And after view init you can access the container element for example by
container.nativeElement.innerHTML = `<h1>${yourString}</h1`;
I'm listing few user details id,name,place,phno using list control form my DB.
My model(userModel) has these 4 items and the array(userList) has some user elements.
Now i use
"ng-repeat user in userList" to populate the data in list.
On click i want to navigate to an update page containing some input fields where i can update that specific users details. For this i need the id. So i'm passing it to the next page.
I've used a scope function updatePage for navigation.
"ng-click updatePage(user.id)"
Inside updatePage function with argument userId:
Apperyio.navigateTo("UpdatePage", {id : userId});
In next page i've taken value as:
var $routeParams = Apperyio.get( "$routeParams" );
var id = $routeParams.id;
I know passing static value as parameters is easy but...
The problem is i'm always getting the same 'id' no matter which row i clicked.
I think the problem is in the function argument passing when clicked.
Please help. I'm a beginner.
Is there any other way to implement such a scenario.
You can share data and functions between pages in Appery Ionic projects using Angular factories.
Click Create New > JavaScript with Name = UserManager and Type = Angular factory.
Set factory code to
define( ['require'], function( require ){
function func( Apperyio ){
var manager = {
userId: null
};
return manager;
}
return [{
/* name for angular resource */
name: 'userManager',
/* type of angular resource */
type: 'factory',
/* angular dependency injection array */
deps: [ 'Apperyio', func ]
}];
});
Then on the 1st page you can set variable before navigating to 2nd page:
Apperyio.get('userManager').userId = user._id;
Apperyio.navigateTo("UpdatePage");
and on the 2nd page you can retrieve it:
var userId = Apperyio.get('userManager').userId;