I am using mat table below structure in my project.
**<mat-paginator></mat-paginator>
<mat-table></mat-table>
<mat-paginator></mat-paginator>**
In my ts file look like
**#ViewChild(MatPaginator) paginator: MatPaginator;**
**Actual problem is first one paginator is working fine and trigger events correctly.
bottom mat paginator is not working and event is not triggered ,also page,pageIndex is not
refelecting from first paginator**
#ViewChild queries only one component reference. But you have two components in your view. So, you have to query both the components separately, as shown below.
<mat-paginator #topPageinator></mat-paginator>
<mat-table></mat-table>
<mat-paginator #bottomPageinator></mat-paginator>
#ViewChild('topPageinator') paginator: MatPaginator;
#ViewChild('bottomPageinator') paginator: MatPaginator;
OR
You can use #ViewChildren instead of #ViewChild
#ViewChildren(MatPaginator) paginators: QueryList<MatPaginator>;
Related
I am trying to get my Material table to first load with a column sorted and have the header arrow set to show that it is sorted. I added the following to my table to sort the table by default when loaded:
<table matSort matSortActive="name" matSortStart="asc" matSortDisableClear>
This seems to work and the data is sorted but the header arrow does no reflect the sort.
You can define the default sort before you set the sorter of your datasource.
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.sort.sort(({ id: 'name', start: 'asc'}) as MatSortable);
this.dataSource.sort = this.sort;
}
Working Stackblitz example
There are some known issues with mat sort arrow not being displayed.
One issue, while not exactly the same as yours, provides a working, programmatic solution: https://github.com/angular/components/issues/10242
It was the only workaround that worked for me.
For specific code see this answer: https://stackoverflow.com/a/65501143/407758
The Angular Material CDK library provides various features including overlays. All the examples I can find show how to display a new component on top of the overlay. My goal is a little different. I want to display an existing component (one of several on the screen) on top of the overlay.
The behavior I have in mind is that when the user goes into a kind of editing mode on a particular object, the component representing that object would sort of "float" on top of an overlay, until editing is done or cancelled.
Is there any straightforward way to do that? It seems that the cdkConnectedOverlay directive might be useful, but I can't figure out how to make it work.
Angular CDK Provides you two ways to achieve that (Directives and Services).
Using the Overlay service you will need to call the create method passing the positionStrategy prop:
#Component({
....
})
class AppComponent {
#ViewChild('button') buttonRef: ElementREf;
...
ngOnInit() {
const overlayRef = overlay.create({
positionStrategy: getOverlayPosition(),
height: '400px',
width: '600px',
});
const userProfilePortal = new ComponentPortal(UserProfile);
overlayRef.attach(userProfilePortal);
}
getOverlayPosition(): PositionStrategy {
this.overlayPosition = this.overlay.position()
.connectedTo(
this.buttonRef,
{originX: 'start', originY: 'bottom'},
{overlayX: 'start', overlayY: 'top'}
)
return this.overlayPosition;
}
...
}
I made an example to show you how to use the CDK overlays services and classes.
Overlay demo
If you prefer the directive way Look at this medium article and check the examples applying the directive way:
Material CDK Overlay with RxJS
I have been scouring the web for a clear answer on how to query for an element generated by a dom-repeat element from Dart code.
sample.html
<dom-module id="so-sample>
<style>...</style>
<template>
<template is="dom-repeat" items="[[cars]] as="car>
...
<paper-button on-click="buttonClicked">Button</paper-button>
<paper-dialog id="dialog">
<h2>Title</h2>
</paper-dialog>
</template>
</template>
sample.dart
I'll omit the boilerplate code here, such as imports or the query to my database to fill the cars property ; everything works fine.
...
#reflectable
void buttonClicked(e, [_])
{
PaperDialog infos = this.shadowRoot.querySelector("#dialog");
infos.open();
}
This generates the following error :
Uncaught TypeError: Cannot read property 'querySelector' of undefined
I have tried several 'solutions', which are not, since nothing works.
The only thing I saw on quite a lot of threads is to use Timer.run() and write my code in the callback, but that seems like a hack. Why would I need a timer ?
I understand my problem may be that the content of the dom-repeat is generated lazily, and I query the items 'before' they are added to the local DOM.
Another advice I didn't follow is to use Mutation Observers. I read in the polymer API documentation that the observeNodes method should be used instead, as it internally uses MO to handle indexing the elements, but it again seems a bit complicated just to open a dialog.
My final objective is to bind the button of each generated model to a dedicated paper-dialog to display additional information on the item.
Has anyone ever done that ? (I should hope so :p)
Thanks for your time !
Update 1:
After reading Gunter's advices, although none of them actually worked by themselves, the fact that the IDs aren't mangled inside a dom-repeat made me think and query paper-dialog instead of the id itself, and now my dialog pops up !
sample.dart:
PaperDialog infos = Polymer.dom(root).querySelector("paper-dialog");
infos.open();
I now hope that each button will call the associated dialog, since I'll bind data inside the dialog relative to the item I clicked ~
Update 2:
So, nope, the data binding didn't work as expected: All buttons were bound to the item at index 0, just as I feared. I tried several ways to query the correct paper-dialog but nothing worked. The only 'workaround' I found is to query all the paper-dialog into a list and then get the 'index-th' element from that list.
#reflectable
void buttonClicked(e, [_])
{
var model = new DomRepeatModel.fromEvent(e);
List<PaperDialog> dialogs = Polymer.dom(this.root).querySelectorAll("paper-dialog");
dialogs[model.index].open();
}
This code definitely works, but it feels kind of a waste of resources to get all the elements when you really only need one and you already know which one.
So yeah, my initial problem is solved, but I still wonder why I couldn't query the dialogs from their id:
...
<paper-dialog id="dialog-[[index]]">
...
</paper-dialog>
#reflectable
void buttonClicked(e, [_])
{
var model = new DomRepeatModel.fromEvent(e);
PaperDialog dialog = Polymer.dom(this.root).querySelector("dialog-${model.index}");
dialog.open();
}
With this code, dialog is always null, although I can find those dialogs, correctly id-ied, in the DOM tree.
You need to use Polymers DOM API with shady DOM (default). If you enable shadow DOM your code would probably work as well.
PaperDialog infos = new Polymer.dom(this).querySelector("#dialog")
I would like to know how to update a row/col and or layout from an external js file on webix. Let's say I have a menu at the left of the screen (col[]) and want to update the right column based on a menu selection. If the menu is composed by
Customers
Orders
Products
And want to update the right column based on the selection calling customers.js, orders.js and products.js
Just like http://webix.com/demos/admin-app/#!/app/orders
That example is very advanced for me, I would like to learn some basic method.
Thanks
Oscar P
You can use webix.ui command or addView API to add a new UI to some specific place on the page.
webix.ajax("config.json", function(text){
$$("layout").addView( JSON.parse(text) );
})
or
webix.ajax("config.json", function(text){
webix.ui( JSON.parse(text), $$("cell_to_replace"));
})
Aquatic,
I also found out an example with .showBatch() API but the console shows "Uncaught TypeError: $$(...).addView is not a function" on both functions, are those part of PRO version? what is wrong?
My code is:
$$("workArea").addView("clientes");
or
$$("workArea").showBatch("batClientes");
on:{
onMenuItemClick:function(id) {
$$("workArea").addView(id);
}
}
Is there any stream I can listen to that fires when a core-splitter is moved? I've tried the following:
Html:
<div id="left-div"></div>
<core-splitter direction="left"></core-splitter>
<div id="right-div"></div>
Dart:
initPolymer().run(() {
Polymer.onReady.then((_) {
querySelector('#left-div').onResize.listen((_) => print('resizing left'));
querySelector('#right-div').onResize.listen((_) => print('resizing right'));
querySelector('core-splitter').onDrag.listen((_) => print('dragging'));
});
});
The page runs, but nothing is ever printed.
More generally, is there a way to listen for an element resizing due to an unspecified parent element's resize event? For example, if I had a div nested inside the left div, is there an easy way I can listen to changes to the inner divs size without explicitly attaching it to the movement of the splitter?
frankiefu from github provided an elegant solution. There is a 'track' event that can be listened to via addEventListener
querySelector('core-splitter').addEventListener('track', callback);
You can see a working js version here, though the script is almost identical in dart.
The documentation doesn't mention any events for core-splitter. I guess events similar to the ones paper-slider https://www.polymer-project.org/docs/elements/paper-elements.html#paper-slider has got recently were a good fit for core-splitter as well.
You can create a feature request at https://github.com/Polymer/core-splitter/issues