I am having trouble merging the drag and drop functionality from Angular Material with resizing in a table. Currently, both features are conflicting and overlapping each other. What I am hoping for is to automatically cancel resizing once drag and drop starts, and vice versa. Any assistance on this matter would be greatly appreciated. Thank you! Here is the link to the repository: https://stackblitz.com/edit/flex-table-column-resize-ekrrrq?file=src/app/app.component.html
Handles can serve different purposes.
For example, in the case of drag and drop, instead of
<mat-header-cell
*matHeaderCellDef
(mousedown)="onResizeColumn($event, i)"
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
[cdkDragData]="{ name: column.field, columIndex: i }"
(cdkDragStarted)="dragStarted($event, i)"
>
{{ column.field }}
</mat-header-cell>
You could use:
<mat-header-cell
*matHeaderCellDef
(mousedown)="onResizeColumn($event, i)"
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
[cdkDragData]="{ name: column.field, columIndex: i }"
(cdkDragStarted)="dragStarted($event, i)"
>
{{ column.field }}
<mat-icon cdkDragHandle>drag_handle</mat-icon>
</mat-header-cell>
A similar concept applies to resizing. Instead of:
<mat-header-cell
*matHeaderCellDef
(mousedown)="onResizeColumn($event, i)"
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
[cdkDragData]="{ name: column.field, columIndex: i }"
(cdkDragStarted)="dragStarted($event, i)"
>
{{ column.field }}
<mat-icon cdkDragHandle>drag_handle</mat-icon>
</mat-header-cell>
You could consider using:
<mat-header-cell
*matHeaderCellDef
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
[cdkDragData]="{ name: column.field, columIndex: i }"
(cdkDragStarted)="dragStarted($event, i)"
>
{{ column.field }}
<mat-icon cdkDragHandle>drag_handle</mat-icon>
<mat-icon (mousedown)="onResizeColumn($event, i)">switch_left</mat-icon>
</mat-header-cell>
It might be more beneficial to incorporate handles for both functionalities.
I included mat-icon which requires importing MatIconModule from @angular/material package into your module.
My bootstrap modal is not displaying on desktop, only showing a faded screen. It works fine on mobile and tablet devices. Any ideas why this might be happening? Here is the code: <button type="button" class="btn btn-primary" data-to ...
I have a simple route setup in the following way: RouterModule.forChild([ { path: '', resolve: { data: DataResolver, stuff: StuffResolver, // <-- This requires data from DataResolver ...
<button onClick={fetchExchangeRates} style={{ backgroundColor: `${selectedColor}` }} className="hover text-white px-3 py-1 flex justify-center items-center gap-2 text- rounded-md" > Convert <FontAwesomeIcon className=&apo ...
I have a JavaScript function that generates a list of store locations and creates a DIV beneath the map. Currently, the items are displayed top to bottom on the page. However, I would like to change the layout so that the items are shown as 3 in a row fro ...
After doing some thorough research online, I've identified the root of my issue: multiple instances of a particular service are being created. I need assistance in pinpointing and rectifying this problem within my code. The secondary service is depen ...
I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...
While working, I came across a very peculiar behavior. Here is the link to a similar issue: stackblitz In the index.html file, I triggered a click event. function createClause(event) { Office.context.document.getSelectedDataAsync( Office.Coerci ...
Welcome to my first question! I am currently facing an issue with defining an object to store strings in multiple languages. I am looking for a flexible solution and have considered using a nested object structure. However, I want the final object to adhe ...
My custom hook utilizes Zustand and is capable of storing various data types. However, I am looking to specify the type of data that will be stored similar to how it is done with the useState hook. import { Profile } from "@/types"; import { crea ...
My goal is to create a chat app using Vuejs 3 and Vuetify 3, but I'm encountering an issue aligning the chatbox with the v-card component. Instead of being positioned at the bottom of the v-card, the chatbox (green) appears at the bottom of the page. ...
As a beginner in Javascript and React-native, I have been experimenting with the technology to assess its viability for potential use in my current workplace. However, I have encountered some challenges with the user interface. To enhance my understanding ...
I've been experimenting with Sveltekit and SCSS to create a Masonry grid. However, I'm facing an issue where the items in my grid are not filling in the empty space as expected. Instead, they seem to be following the size of the largest image, le ...
I've encountered an issue while trying to build the app for production. The error message states: ReferenceError: window is not defined. I'm struggling to find a solution. FullCode: const [windowSize, setWindowSize] = useState<WindowInfo>( ...
I'm exploring ways to utilize Angular Universal in my app and I am seeking a method to retrieve the complete path of the current url within an Angular component. Initially, I considered tapping into the window object which would involve injecting it o ...
Within my application, there is a primary module: app.component.html <h1>{{globals.title}}</h1> <router-outlet></router-outlet> In app.module.ts @NgModule({ imports: [ BrowserModule, HomeModule, NotesModule, ...
Issue: I am looking for a way to consolidate the multiple arrays returned individually into a single array. Solution: fetchAllRiders() { var distanceObs = Observable.create(observer => { this.http.get(this.API + '/driver/all').map(res = ...
Exploring ways to develop a basic autocomplete feature without relying on third-party dependencies has been my recent project. So far, I have managed to populate a results list using an ajax call and complete fields with mouse onclick events for each optio ...
As I work on multiple substantial Angular 11 template forms containing basic inputs like text, radiolists, and checkboxes, I am looking for the most effective method to calculate the percentage of completed inputs while the user is actively engaging with ...
Within my Angular 2 component, I am utilizing an array named fieldlist which is populated by data retrieved from an http.get request. The array is declared as follows: fieldlist: string[] = []; I populate this array by iterating through the JSON response ...
Currently, I am utilizing the mouseenter and mouseleave events to control the opening and closing of my sidenav within the app. However, I have encountered issues because when hovering over the container quickly, these events are triggered multiple times ...