Does anyone have a kendo UI scheduler example with angular 2? Is it compatible?
Thanks
Since there is some interest in this still you can create a component that is wrapped by the scheduler:
import { Component, ViewEncapsulation, ElementRef, AfterViewInit, OnDestroy, DoCheck, Input, Output, EventEmitter, IterableDiffers } from '#angular/core';
//you can import Jquery here if you want - i used it via CDN and not local node.
declare var jQuery: any;
scheduler: any;
schedulerControl: any;
#Component({
selector: 'scheduler',
template: `
<div></div>
`,
styleUrls: ['./scheduler.component.scss'],
encapsulation: ViewEncapsulation.None
})
constructor(
protected el: ElementRef,
) {
}
//you can also do #input and #outputs here if you want to build proper events around the scheduler components.
ngAfterViewInit() {
this.scheduler = jQuery(this.el.nativeElement.children[0]);
this.schedulerControl = jQuery(this.scheduler).data("kendoScheduler");
this.scheduler.kendoScheduler({.....put your scheduler options here ....});
Note:
You must import and use the right version of jquery - which is sadly still version 1.xxx
Note 2:
New versions now supports higher versions of Jquery - important to make sure they versions match with kendo requirements.
We are currently working on a project that has a very complex scheduling module.
At the momonet we are using Kendo UI scheduler wrapped with Angular2.
This is of course not a good solution as we are wrapping the Kendo JQuery implementation. It does work (and pretty well) but we will not continue with it if there will be no progress on native Angular2 implementation soon as it forces us to work "outside" Angular.
I think it's a shame that Telerik announcements on Angular2 are not clear enough. They put on their flag being leaders in Angular2 support long ago but it seems this is not happening as expected. We are already invested in Kendo in other projects(not Angular2) but we will have to choose something real soon.
If Kendo will not start showing any real progress we will not continue with it.
It is likely that the Angular2 kendo scheduler widget will be released in 2017. Here is a link to their roll out plan.
http://www.telerik.com/blogs/what-to-expect-in-2016-for-kendo-ui-with-angular-2-and-more
In the meantime to use the scheduler our team has just imported angular 1.x for the page running our scheduler in our angular 2.x app. Not ideal but you can also get just the kendo scripts you need to run the scheduler if you're worried about performance.
You may also want to look at using ngForward with angular 1.x in the meantime until the angular 2.x widget is available. Then convert your entire application over to angular 2.x when kendo releases the scheduler.
Related
After the release of Strapi 4, the CKEditor library for Strapi is no longer supported. And when trying to follow the documentation it is also not very clear if it is with component injection or some other procedure.
Strapi 4 Docs
WYSIWYG editor To change the current WYSIWYG, you can either install a third-party plugin, or take advantage of the bootstrap lifecycle (see Admin Panel API).
In the Strapi 4 presentation, Rémi de Juvigny, uses component injection, but it is only for the sidebar, not for changing any specific content-type collection.
Has anyone made any progress with this new version of Strapi and CKEditor?
On Strapi V4 Now we should use:
app.addFields({type:'wysiwyg',Component:Editor})
insted of
strapi.registerFields({type:'wysiwyg',Component:Editor})
Eg.
import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import Initializer from './components/Initializer';
import Editor from './components/Editor';
const name = pluginPkg.strapi.name;
export default {
register(app) {
app.registerPlugin({
id: pluginId,
initializer: Initializer,
isReady: false,
name,
});
app.addFields({type:'wysiwyg',Component:Editor})
}
};
After upgrading an angular nativescript project to the current versions of angular, typescript, tns, etc.. I'm getting a runtime error stating:
TypeError: Cannot set property 'actionBarHidden' of null at new
AppComponent...
The code that previously worked to hide the action bar looks like this:
import {Page} from "tns-core-modules/ui/page";
export class AppComponent implements OnInit, AfterViewInit {
constructor(page: Page) {
page.actionBarHidden = true;
}
}
Why is page null after the injection?
In the earlier versions the root was always a Frame, so by default there will be a Page.
But with the latest version, you are allowed to define flexible root components and any number of frames (page-router-outlet) within your app. So there won't be a default Frame / Page created within app component. Page can be injected only into the components those are loaded inside the page-router-outlet.
If TLDR the above link, the quick fix for me was to replace:
<router-outlet></router-outlet> with <page-router-outlet></page-router-outlet>
in app.component.html
Moving code to ngOnInit solved it for me
I'm new to NativeScript. I have created a new project using the Angular Blank template. The navigation is done using page-router-outlet. I want to include a xmlns attribute on the page level. As far as i can see and understand the entire code is rendered inside a global page attribute. I've seen that I can modify the page properties by injecting the Page in a component and changing it's properties, but how can I do this for xmlns?
Best regards,
Vlad
To register a UI component in Angular based application you should use registerElement and not XML namespaces (which is a concept used in NativeScript Core). Nowadays most plugin authors are doing this job for you, but still, some of the plugins are not migrated to use the latest techniques so in some cases, we should manually register the UI element.
I've created this test applicaiton which demonstrates how to use nativescript-stripe in Angular. Here are the steps to enable and use the plugin.
Installation
npm i nativescript-stripe --save
Register the UI element in app.module.ts as done here
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CreditCardView", () => require("nativescript-stripe").CreditCardView);
Add the following in main.ts as required in the plugin README
import * as app from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";
declare const STPPaymentConfiguration;
app.on(app.launchEvent, (args) => {
if (platform.isIOS) {
STPPaymentConfiguration.sharedConfiguration().publishableKey = "yourApiKey";
}
});
Use the plugin in your HTML (example)
<CreditCardView id="card"></CreditCardView>
I'm using Ember 2.7.0 of course with ember-cli.
I come from Rails, I used to put in "assets/application.js" all my javascript like, for example:
var ready = function () {
myFunction('test');
$('#btn-fluid').on('click', function () {
$('#myPage').toggleClass('container')
});
}
document.addEventListener("turbolinks:load", function () {
ready()
})
Now with Ember where I have to put this code in my application?
I read on the web the use of:
Ember.Application.create({
ready: function () {
});
but I don't know how to put this code: in app.js maybe, but I already have:
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver
});
and if I create another file in the root, like for example "mycode.js" like this:
import {Ember} from 'ember';
let myCode;
myCode = Ember.Application.create({
ready: function () {
console.log('Test!');
}
});
export default myCode;
and import it in application using ember-cli-build.js here:
...
app.import('mycode.js');
it compile the big js with my code, but it doesn't work at all my ready function.
How to do?
I have to use Components? Maybe an application component?
Which is the best Ember way for top performances?
To start working with Ember is a must to know Ember's structure and the way Ember works, Simply you need to use Ember guideline to get the best performance. I will explain you some steps and example and I hope it will help you to understand more.
First of all check this image
1. Review Ember Guides and API Docs
In addition, it's a good to review this repository on Github as well. https://github.com/emberjs/guides/ which will help developers to get used to Ember.
2. Install Ember-CLI
Ember-CLI is a command line interface which has been designed for creating Ember apps that strongly favor convention over configuration.
3. Install the Ember Inspector Extension
The Ember Inspector Extension is super-useful for debugging your Ember app.You may also find Chrome app on Google play.
4. Read “From Rails To Ember”
Since you know Ruby on Rails and you are a developer of that, it is essential that you read the tips compiled in From Rails To Ember.
5. Get to Know Ember.Component
A simple way to think of an Ember component is that it is a combination of controller and view, isolated and reusable:
You should pass in the state you need to the component.
Components should communicate with their parent scope (e.g, controller
or another component) by sending actions.
Parent scope (e.g., controller or another component) communicates with
the component by changing the data state that it has passed to the
component.
As an example I am going to explain some part of your code.
You have this
$('#btn-fluid').on('click', function () {
$('#myPage').toggleClass('container')
});
and probably this is your HTML code
<a id="btn-fluid">Whatever for CLICK </a>
<div id="myPage" class="">dummy text </div>
However, in Ember what would be the best practice to use Actions in your Route or Controller to define your action function for example your code in Ember will be something like this :
myPage: null,
actions: {
clickOnbtnFliud() {
this.set('myPage', 'container');
}
}
and HTML in the same template for the controller would be like
<a {{action 'clickOnbtnFliud'}}>Whatever for CLICK </a>
<div class="{{myPage}}">dummy text </div>
In Summary,
You may use Components as you need which is the best practice for your Ember Application but you need to understand where you have to create that.
You rarely need to edit Ember-Cli-Build.js unless you want to insert extra plugins library or ... but I don't recommend you to insert your internal JS files as you can simply convert it to Ember Native codes. For instance you don't need to do this app.import('mycode.js'); but you can simply create your Route and add your custom code like I said as an example before to your Route or Controller or Components.
What I can assure you is if you user Ember in the way that you can find in Guidelines in Ember website, You don't need to worry about performance.Just try to user Ember Native way to implement your code.
Last word, As much as possible keep yourself motivated to use EmberAddons rather than thirdparty plugins and always choose the best updated addons not all of them. Search for best Addons and popular ones and use it.
Hope this guide help you.
I was researching a way if using a charting library with angular-meteor application. I have seen some examples of using HighCharts with AngylarJS. I have also seen examples of using HighCharts with Meteor. I would love to be able to use either HighCharts or ChartJS within angular-meteor application, and to have my charts data bound to Angular $scope, but, at the some time, have those charts react to the data changes in the server-side MongoDB (which us what Meteor does). I have seen some examples of angular-meteor app, but never seen such an app use any charts. Can anyone point me to a working angular-meteor example, which has a reactive chart?
You can use this angular directive for chart.js. Here is a simple example showing a pie chart:
Starting from a Meteor 1.3 template application (run meteor create myapp).
Replace blaze-html-templates with angular-templates in .meteor/packages,
add
"angular": "^1.5.5",
"angular-chart.js": "0.10.2",
"angular-meteor": "^1.3.10",`
to "dependencies" in package.json, run meteor npm install, replace the content of client/main.js with this:
import angular from 'angular';
import 'angular-chart.js/dist/angular-chart.css';
import 'angular-chart.js';
angular.module('app', [
'chart.js'
]).controller('MainCtrl', function ($scope){
$scope.labels = ["a", "b", "c"];
$scope.data = [1, 2, 3];
});
and the content of client/main.html with this:
<body ng-app="app" ng-controller="MainCtrl">
<canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>
</body>
run meteor.
You should see the pie chart. Obviously you can replace the data variable with some data from a collection etc. using Meteor. Here we haven't really used meteor except of the command line tool.