How can we add loader in clarity framework in div tag as we can add in Datagrid attribute [clrDgLoading]="loading" to add loader?
Clarity has a spinner component, the detailed documentation is available here: https://vmware.github.io/clarity/documentation/spinners
Set the [clrDgLoading] property in template like below.
<clr-datagrid [clrDgLoading]="loading">
In Component.ts initialize the "loading" property to true. Then after data loaded from the data service, set the "loading" property to false.
export class Component implements OnInit {
loading = true;
constructor(
private dataService: DataService,
) {}
ngOnInit(): void {
this.dataService
.getData()
.subscribe((data) => {
// your code
this.loading = false;
});
}
Related
Right now I'm integrating custom plugins into the ckeditor 5. I created and added plugins using the ckeditor 5 documentation.
I also have a custom "super" build (similar to this example) that I use in my web application.
Now my problem is that my plugins will not be disabled in the ckeditor read mode (as showcased in the image at the button). The ckeditor documentation mentions that this should be the "default" behaviour for plugins / buttons.
If someone has an idea where I'm going wrong that'd be greatly appreciated!
Here is a skeleton example of my custom plugin class.
import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';
import ckeditor5Icon from './icons/insertvariable.svg';
export default class HWInsertVariable extends Plugin {
static get pluginName() {
return 'HWInsertVariable';
}
init() {
const that = this;
const editor = this.editor;
const model = editor.model;
let labelTxt = 'Variable einfügen';
editor.ui.componentFactory.add( 'hwInsertVariableButton', locale => {
const view = new ButtonView( locale );
view.set( {
label: labelTxt,
icon: ckeditor5Icon,
tooltip: true,
affectsData: true
} );
this.listenTo( view, 'execute', () => {
model.change( writer => {
that.buttonClicked();
} );
editor.editing.view.focus();
} );
return view;
} );
}
buttonClicked() {
//code
}
}
Im not sure what the correct method to resolve this is, as I also am facing the same. But what I have found so far, is that there might be a hacky way to get around this.
Checkout the docs regarding "disabling commands", "read-only" mode, and notice the CSS class "ck-disabled"
if/when I find a working way, I will try to come back here and post a better solution
Update:
I fixed this for me when I found that I was missing the section of the code in my my_plugin_ui.js where
const command = editor.commands.get('nameOfCommand');
// Execute the command when the button is clicked (executed).
buttonView.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
My view is
<Switch checked="{{ active }}" propertyChange="onCheckChange"/>
exports.onCheckChange = function(args)
{
//Api Service call
}
Actually I am binding the active value by API call and the issue is that onCheckChange gets executed during the initial binding with false value, so whenever I initially set the active==true by api service call and load the page, the onCheckChange is executed with checked==false, can anyone give me an idea about this please.
Note: Beginner in Nativescript
I battled with the checked property a lot so I opted for two-way binding, which behaves as expected:
// test.xml
<Switch [(ngModel)]="isUnicorn"></Switch>
// test.ts
isUnicorn: boolean = true;
......
if (this.isUnicorn) {
console.log("It is a unicorn");
}
Note that to get two-way binding to work you need to import NativeScriptFormsModule in app.module.ts or applicable module for instance:
// app.module.ts
import { NativeScriptFormsModule } from "nativescript-angular/forms";
......
#NgModule({
imports: [
NativeScriptFormsModule,
......
],
exports: [
NativeScriptFormsModule,
......
],
......
The two-way data-binding (described by leoncc) might be specific to the Angular NativeScript.
Here's a workaround without the two-way data binding, hopefully it will be easier to port to the plain NativeScript if needs be.
In the controller we can get the state of the Switch with a ViewChild query:
checked = true;
#ViewChild ('switch') private switch: ElementRef;
switched() {
let switch: Switch = this.switch.nativeElement;
this.checked = switch.checked}
And in the template we should invoke the switched change handler:
<Switch #switch [checked]="checked" (checkedChange)="switched()" class="switch"></Switch>
I've got a model class and would like to get access to a ui element.
frameModule.topmost().getViewById("id") or
frameModule.topmost().page.getViewById("id")
don't work.
As I understand what you need, I hope this solution would help.
In XML, assuming that you have UI Element with an ID. You will get it in the controller. For example:
In page.xml:
<Label id="test"/>
In the binding object class in page-view-model.js, create a property that has type of label:
var labelModule = require("ui/label");
var Label = labelModule.Label;
class Someclass extends Observable {
public label: Label;
}
In page.js:
function pageLoaded(args) {
var page = args.object;
var myLabel = page.getViewById("test");
var context = new Someclass();
page.bindingContext = context;
context.label = myLabel;
}
There are many ways to get a reference to the Page object. The documentation is a good reference to learn about them: https://v7.docs.nativescript.org/ui/components/page#page-reference
To answer you question, the usual way to get a reference to the Page object inside a view model class is by using the EventData passed to each event like a tap event when a Button is tapped.
onButtonTap(args: EventData) {
const button = args.object as Button;
const page = button.page;
// ...
}
I want to expose a method from a custom component in a NativeScript project. Here is the conceptual setup:
MyComponent.xml
<StackLayout loaded="loaded"> ...UI markup... </StackLayout>
MyComponent.ts
export function loaded(args) { //do stuff };
export function myCustomMethod() { //do more stuff };
MyPage.xml
<Page xmlns:widget="..." loaded="loaded">
<widget:MyComponent id="myComponent" />
</Page>
MyPage.ts
export function loaded(args) {
let page = <Page>args.object;
let widget = page.getViewById("myComponent");
widget.myCustomMethod(); //<--THIS DOES NOT WORK
}
Question: How do I properly expose the myCustomMethod on the custom component so that the hosting page can access and call it via JavaScript?
By default, when trying to get a reference to the custom component on the page, a reference to the custom component's layout container is returned (in this example, a StackLayout).
So, as a workaround, I am doing this:
MyComponent.ts
export function loaded(args) {
let stackLayout = <StackLayout>args.object; //Layout container
stackLayout.myCustomMethod = myCustomMethod; //Attach custom method to StackLayout
}
It's a bit of a hack, but it's working. Is there any better way to expose custom component methods short of creating a super class for the layout container?
UPDATE
To be more accurate, the custom component has instance properties, so the eventual solution would need to support a scenario like...
MyComponent.ts
let isStarted = false;
export function loaded(args){ // do stuff };
export function myCustomMethod() { isStarted = true; };
As the method you want to reuse is not coupled to your customCompoenent, you can create a common file and require it where needed and reuse the exposed methods accordingly. Or you can directly import your MyComponent.ts and reuse its exported methods (not so good idea as you will probably have access to all exposed methods of your MyCompoennt.ts like onLoaded, onNavigationgTo, etc.)
For example:
in your navigator.ts (or if you prefer to your MyComponent.ts)
import frame = require("ui/frame");
export function navigateBack() {
frame.goBack();
}
and then reuse it where needed like this:
MyPage.ts
import navigatorModule = require("navigator");
export function goBack(args: observable.EventData) {
navigatorModule.goBack(); // we are reusing goBack() from navigator.ts
}
Another applicable option is to use MVVM pattern and expose your methods via the binding context.
In my previous project , i use Backbone.js of version 1.1.2 , and the Backbone.View is defined as
var View = Backbone.View = function(options) {
this.cid = _.uniqueId('view');
options || (options = {});
_.extend(this, _.pick(options, viewOptions));
this._ensureElement();
this.initialize.apply(this, arguments);
this.delegateEvents();
};
As i update my Backbone to the latest version(1.2.3) , now the Backbone.View is defined as
var View = Backbone.View = function(options) {
this.cid = _.uniqueId('view');
_.extend(this, _.pick(options, viewOptions));
this._ensureElement();
this.initialize.apply(this, arguments);
};
The difference is the delegateEvents now is moved to the setElement method , thus i can't dynamically change the
events property of Backbone.View. But in some situation , i think dynamically change events is needed , for example,
i have a FileRowView which extends Backbone.View to represent file information , its template html string is :
<li>
<h3 class="title">File name</h3>
<p>File description </p>
</li
The problem the title dom can be clicked and do something , but in other situation it can't be clicked , so in the events hash , i can
control this behavior in the initialize method just like :
var FileRowView = Backbone.View.extend({
tagName:'li',
tmpl:
'<h3 class="title">File name</h3>'+
'<p>File description </p>',
events:function(){
var events = {};
if(this.options.canClickTitle){
events['clcik .title'] = this._titleClickHandler
}
return events ;
},
//
// options = {
// canClickTitle:false
// ...
// ...
// }
//
initialize:function(options){
options = _.extend({}, {
canClickTitle:true
} , options);
this.options = options ;
this.render();
},
_titleClickHandler:function(){
console.log('some action');
},
render:function(){
var html = _.template(this.tmpl)();
this.$el.append(html);
}
});
But in the new version Backbone.View , as the delegateEvents has been added to the setElement method , how can i dynamically add event handler in the events property ?
In the version 1.2.0 the change document say:
Views now always delegate their events in setElement. You can no longer modify the events hash or your view's el property in initialize.
I don't know why ?
I'd turn the problem around a bit and use the tools you already have rather than trying to force them to work the way you think they should.
For example, you could make your template look like this:
<h3 class="title <%= is_clickable ? 'clickable' : '' %>">File name</h3>
<p>File description</p>
Then include an is_clickable flag in the data you feed the template and your events would be simple and static:
events: {
'click .clickable': '_titleClickHandler'
}
Or if you need more specificity:
events: {
'click .title.clickable': '_titleClickHandler'
}
Now you don't have to do anything weird or version dependent and you don't have to fight the framework.