Lightstreamer client implementation with Angular 2

[gianluca.finocchiaro]

Hi nttam,

If I got the point, you would like to use the exposed method of VisualUpdate class, in order to configure the visual effects to be applied to the grid. But you can leverage such object only when passed as parameter in onVisualUpdateevent handler of a StaticGridListener or a DynaGridListener, which in turn need to be used together with a StaticGrid or a DynaGrid as subscription listener of the the Subscription object. As both StaticGrid and DynaGrid are custom widgets meant to provide a mapping between the internal Lighstreamer model and an HTML visualization, there is no a straight way to use them within Angular, which uses its own data-binding mechanisms.

Regards,
Gianluca

[nttam]

Hi Gianluca,
Thanks for your quickly reply, I did it manual depend on "forEachChangedField" method, thanks again! ^-^

[patrick.oneill]

Hi,

I have an issue with Lightstreamer running on an angular-cli - angular 2 app. When I call the .connect function on the lightstreamer client it causes my app to call the app bootstrap function. Has anyone else had this issue?

I am using lightstreamer client v6.x.

[Alessandro Carioni]

Hi Patrick,

See my answer on Github.

[rvkvino]

Could you please help me on this using COMMAND subscription in angular 2. I could connect and work in MERGE subscription.

[Alessandro Carioni]

Hello,

You should look at the Angular Demo and the Portfolio Demo. The first demo shows the integration between the Lightstreamer client and Angular, while the second demo shows an example of item subscriptions in COMMAND mode.

[rvkvino]

Hello,
I have working code in angular for MERGE subscription. This is working fine in angular.
I have implemented this by using

this.subscription = new Subscription("MERGE", this.itemNames, this.fieldNames);

In this itemNames and fieldNames already I know so given statically, there is no issue on this.
In COMMAND subscription I have used this in using HTML it's working fine without any issue. But when I use in angular 2 this not working same which I have done in HTML.
I did below code in my javascript file when I use HTML,

var liverateGrid = new DynaGrid("lsliverates",true);
liverateGrid.setNodeTypes(["div","span","img","a"]);
liverateGrid.setAutoCleanBehavior(true,false);
liverateGrid.addListener({
onVisualUpdate: function(key,info) {
console.log(info);
if (info == null) {
return;
}
liverateGrid.setSort("order", false, true);
var liverateSubscription = new Subscription("COMMAND",liverateId,fieldList);
liverateSubscription.setDataAdapter(lsdata.provide r);
liverateSubscription.setRequestedSnapshot("yes");

liverateSubscription.addListener(liverateGrid);
lsClient.subscribe(liverateSubscription);

And my template looks like,

<tbody>
<tr id="lsliverates" class="liverate-body" data-source="lightstreamer" >
<td><div data-source="lightstreamer" data-field="desc"></div></td>
<td class='table_data'><div data-source="lightstreamer" data-field="bid"></div></td>
<td class='table_data'><div data-source="lightstreamer" data-field="ask"></div></td>
<td class='table_data'><div data-source="lightstreamer" data-field="delivery"></div></td>
<td style="display:none;"><div data-source="lightstreamer" data-field="order"></div></td>
</tr>
</tbody>

But same I have tried in angular 2 for COMMAND mode, (For MERGE I know the itemNames and fieldNames list so that I have did this success by using the link (https://github.com/Lightstreamer/Lig...lient-angular2)

This below code I have tried in angular but not working,

let lsData = JSON.parse(localStorage.getItem('WLLSData'));
this.lsClient = new LightstreamerClient("http://url:8080", lsData.adapter);
this.lsClient.connectionSharing.enableSharing("WLC ommonConnection", "ATTACH", "CREATE");
this.lsClient.connectionOptions.setHttpExtraHeader s({ "username": lsData.username });
this.lsClient.connect();

this.dynasubscription = new Subscription("COMMAND", "lmxtrade" , this.dynafieldNames);
this.dynasubscription.setDataAdapter(lsData.provid er);
this.dynasubscription.setRequestedSnapshot("yes");
var liverateGrid = new DynaGrid("liverates",true);
liverateGrid.setNodeTypes(["div","span","img","a"]);
liverateGrid.setAutoCleanBehavior(true,false);

liverateGrid.addListener({
onVisualUpdate: function(key, info, domNode) {
console.log(info);
},
onItemUpdate: (updateObject) => {
var itemName = updateObject.getItemName();
console.log(itemName);
}
});
console.log(liverateGrid);
this.lsClient.subscribe(this.dynasubscription);

Template looks like,

<div id="liverates" data-source="lightstreamer">

<div style="border-right: 1px solid rgb(27, 104, 94);" class="com-name" data-source="lightstreamer" data-field="desc"></div>
<div class="comm_bod" data-source="lightstreamer" data-field="bid"></div>
<div class="comm_bod" data-source="lightstreamer" data-field="ask" ></div>

</div>

[Alessandro Carioni]

Hello,

Can you explain what the problem is exactly?
For example, if you try to embed the last code snippet in a straight Html page without Angular, does it work as expected?

[rvkvino]

Yes it's working in normal html, only issue on Angular. Is this possible to use same method used in html and javascript in Angular application also.

[Alessandro Carioni]

Hello,

Lightstreamer widgets work best in straight Html pages.
If you want to implement an Angular app, you should rely on Angular components only.