Issue Am Struggling lot to complete my task as newly started into Angular CDK DragnDrop. When trying to drag the image item and drop into location, I got Cannot read properties of undefined (reading ‘length’) . Not sure this is
Continue readingTag: angular-cdk
Angular material drop event returns wrong index of dragged item and moves wrong item
Issue Good afternoon, I’m trying to setup two lists of chips which are draggable between two lists. The two variables availableActivationCountries and availableGroupCountries are filled by filtering another array, as shown below. this.availableActivationCountries = this.brandCountries.filter(c => c.brandAvailable === true).sort((a, b)
Continue readingThe Angular Material version (12.1.4) does not match the Angular CDK version (12.2.1). Please ensure the versions of these two packages exactly match
Issue After installing FlexLayout using this command npm i -s @angular/flex-layout @angular/cdk Which obviously install Angular CDK as well, i’m getting the following warning The Angular Material version (12.1.4) does not match the Angular CDK version (12.2.1). Please ensure the
Continue readingAngular cdk-virtual-scroll-viewport not taking max height until screen is resized
Issue TLDR: have a list of items that need to be in a virtual scroll. It works fine, but only takes up ~30% of the space available until the screen size is changed. (make the dev tools larger). On initial
Continue readingHow does angular's selection model determine equality of two objects?
Issue I’m trying to select pre-select some users in a table using Angular’s selectionmodel. The call retrieving the users in the table and the call retrieving the already selected users are different so the actual objects are not the same.
Continue readingHow to update the view when using maps with Angular CDK DnD?
Issue I have a small list with some items that can be reordered (see stackblitz). Internally that list is implemented as a map. Conveniently, Angular provides the pipe keyvalue, which allows an easy way to iterate over maps like this:
Continue readingPrimeng table virtual scroll header jumping while scrolling up
Issue I have a large set of data that needs virtual scrolling and I use PrimeNg v13.4.0 with angular/cdk v13.3.7. I have exactly the same issue with PrimeNg demo. When scrolling down, the sticky header works well, but when scrolling
Continue readingCustom component animation does not work in Angular 9 + CDK`on drag n drop
Issue I’m tryng to create a list that user can reorder items, it is pretty straightforward to do using @angular/cdk/drag-drop and following the sample in official documentation (https://material.angular.io/cdk/drag-drop/overview). My sample does work, it can reorder the list on drag n
Continue readingCypress – Drag & drop – Angular CDK
Issue Having a simple implementation of the Angular CDK drag & drop, with cypress. Having latest versions of all packages, all the questions & solutions around wont work. Basically, the drag & drop wont eve fire. Tried with https://www.npmjs.com/package/@4tw/cypress-drag-drop https://docs.cypress.io/api/commands/trigger
Continue readingCustom component animation does not work in Angular 9 + CDK`on drag n drop
Issue I’m tryng to create a list that user can reorder items, it is pretty straightforward to do using @angular/cdk/drag-drop and following the sample in official documentation (https://material.angular.io/cdk/drag-drop/overview). My sample does work, it can reorder the list on drag n
Continue readingCustom component animation does not work in Angular 9 + CDK`on drag n drop
Issue I’m tryng to create a list that user can reorder items, it is pretty straightforward to do using @angular/cdk/drag-drop and following the sample in official documentation (https://material.angular.io/cdk/drag-drop/overview). My sample does work, it can reorder the list on drag n
Continue readingCypress – Drag & drop – Angular CDK
Issue Having a simple implementation of the Angular CDK drag & drop, with cypress. Having latest versions of all packages, all the questions & solutions around wont work. Basically, the drag & drop wont eve fire. Tried with https://www.npmjs.com/package/@4tw/cypress-drag-drop https://docs.cypress.io/api/commands/trigger
Continue readingCypress – Drag & drop – Angular CDK
Issue Having a simple implementation of the Angular CDK drag & drop, with cypress. Having latest versions of all packages, all the questions & solutions around wont work. Basically, the drag & drop wont eve fire. Tried with https://www.npmjs.com/package/@4tw/cypress-drag-drop https://docs.cypress.io/api/commands/trigger
Continue readingGet the scroll position from an Angular Material Tab content
Issue I use an Angular Material Tab component with custom components as content for the tabs. The tabs list come from an API. I need to get the scroll index of the mat-tab-body-content as the element with this class has
Continue readingangular 4 – Row styling in CDK data-table
Issue I am trying to use cdk datatable with customized row view. But there is not enough information about how to accomplish this yet. I tried going through the source code, But couldn’t get a grasp of how to do
Continue readingUnexpected module 'CdkTableModule' declared by the module 'AppModule'
Issue At first when I type ng serve, 2 directory @angular/material and @angular/cdk were removed, I correct the problem but now I have another. import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; import {BrowserAnimationsModule} from ‘@angular/platform-browser/animations’;
Continue readingAngular – (click) not firing in my Material/CDK Datatable
Issue Consider the following table in my template <mat-table #table [dataSource]=”dataSource”> <!— Note that these columns can be defined in any order. The actual rendered columns are set as a property on the row definition” –> <!– ChangeId Column –>
Continue readingmd-table in Angular Material 2
Issue I am working with Angular Material Table. In Html code, there is <ng-container cdkColumnDef=”userId”> <md-header-cell *cdkHeaderCellDef> ID </md-header-cell> <md-cell *cdkCellDef=”let row”> {{row.id}} </md-cell> </ng-container> I found out that cdkHeaderCellDef and cdkCellDef are from CDK Table I am getting error
Continue readingProperty 'matSortChange' does not exist on type 'MatSort'
Issue I’m upgrading Angular Material and CDK version 2.0.0-beta.9 to 2.0.0-beta.12 in my Angular 4 app. I get next compilation error: “Property ‘matSortChange’ does not exist on type ‘MatSort’”. Anyone knows whats wrong? Solution The answer is in the changelog,
Continue readingFiltering on specific columns of angular material2 table
Issue In my angular app, there is a html page with a text box which will be used for filtering the below grid. As of now, the search is happening throughout all columns, i want to restrict it to only
Continue readingwant to set some check boxes in mat-table to true
Issue i am writing code for roles and permission when admin will click on role on next component will show roles having permission for that i have used mat-table in that i want to check which permissions role already have
Continue readingUnable to sort a table using angular material2
Issue I have an Angular material table. The HTML is below: <act-toolbar [leftColor]=”‘blue'” [rightColor]=”‘blue'”></act-toolbar> <mat-spinner *ngIf=”!dataSource” style=”margin:218px 45%”></mat-spinner> <div fxLayout=”column” *ngIf=”dataSource”> <div class=”example-filter-box” fxLayout=”column”> <h4 class=”act-section-header”>COMMITTEE SELECTION</h4> <form class=”example-form”> <mat-form-field class=”example-full-width” shouldPlaceholderFloat=”false”> <input matInput (keyup)=”applyFilter($event.target.value)” placeholder=”Please enter CAMS Check Name
Continue readingGet reference to component from CDK Overlay Portal
Issue I am using a service to instantiate Angular Material CDK Overlays using Component Portals. Once I create a portal and attach it to an overlay, is there any way to access the component reference of the component that the
Continue reading@angular/material no exported member 'OverlayContainer'
Issue I’m trying to get custom theming working and everything is ok until I need to style the OverlayContainer for dialogs and modals. When I try to import OverlayContainer as per the documentation and various guides VS Code throws an
Continue readingMaterial2 cdk Scrollable never initialized
Issue I am trying to use the new APIs to listen to scroll events in Material2. I imported the ScrollDispatchModule in my app.module.ts and annotated a container with cdkScrollable directive as in <div cdkScrollable> <div class=”my-content”> … </div> <footer class=”my-footer”>
Continue readingAngular 4 showing json in a table
Issue I have the following JSON: { “0”: { “open”: 93.3, “high”: 96, “low”: 93.3, “close”: 95.04, “volume”: 358172, “score”: “100”, “symbol”: “ZBRA”, “company_name”: “Zebra Technologies Corp.”, “company_sector”: “Industrial Goods” }, “1”: { “open”: 19.1396, “high”: 19.5578, “low”: 18.7612, “close”:
Continue readingConnecting overlay to dynamic elements
Issue I want to make overlay using angular-cdk that will be attached to dynamically created elements using *ngFor is ti possible? Here is example: https://stackblitz.com/edit/angular-z4a989 I want to open overlay with every button but overlay should be attached to that
Continue readingBuilding cdk modal – ngOnInit is not triggered and no data is passed
Issue I’m trying to build modals library that is dependent only on CDK. Modal is opened with service and I pass entryComponent to render it in modal. Here is sample: https://stackblitz.com/edit/angular-ofzpks?file=src%2Fapp%2Fmodal.component.ts In modal itself I’m creating component with factory: const
Continue readingHow to access a component reference in [cdkPortalOutlet]
Issue I’m implementing Angular’s CDK portals to load up dynamic components. I’m able to load the components onto the page really quickly and easily using the given html, and app.ts. Once I’ve loaded the component, I’d like to access it’s
Continue readingAngular 5 Material Table replace filterPredicate with function that has different parameter types
Issue I’m currently working on a component that uses the material 2 table to show some data. I need to be able to write custom filter operations (e.g. price > 1) and combine multiple filters. To make that work i
Continue readingHow to subscribe to Observable of Component injected via @angular/cdk/portal?
Issue I’m trying to implement a basic (very basic) modal implementation. I’ve got a ModalService and a ModalComponent. The ModalService creates an instance of the ModalComponent and injects it into the page using the @angular/cdk/portal. I can get the modal
Continue readinghow to access matTabNavBar.updateActiveLink method
Issue MatTabNav Docs show a method that can be used to update the active links for a mat-tab-nav. No examples of how to implement this seem to exist and the source code does not give any better insight into how
Continue readingDrag and Drop with sorting it is possible in Angular Material?
Issue Scenario : From Angular Material cdk version 7.0.3 we have Drag&Drop sorting. In that Drag&Drop, everywhere in that div we can click and drag. Without click everywhere, only icon will be clickable and drag that entire div. Now below
Continue readingHow to keep Angular CDK Overlay component within page based on page offset
Issue I am working on my library Contexr. I just refactored my application to use the Angular CDK Overlay to display the context menu, so I don’t have to include some component in the actual application anymore (one less installation-step).
Continue readingAngular Material table row (click) event triggered when clicking an action in a cell within that row
Issue How can you trigger a modal with a button inside a mat-table without triggering the rows (click) event? I’ve seen and read with Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell
Continue readingExpressionChangedAfterItHasBeenCheckedError thrown on change detection when TemplatePortal attached to parents PortalOutlet
Issue I have the following component structure: App -> GrandParent -> Parent -> Child. The ChildComponennt declares a <ng-template cdkPortal> in its template. AppComponent, GrandParentComponent and ParentComponent each declares a <ng-template cdkPortalOutput> in their respective templates. Now, if the the
Continue readingHow to drag element to another container?
Issue I use cdkDrop from Material and this is my code: TS: import { Component } from ‘@angular/core’; import { CdkDragDrop, CdkDrag, moveItemInArray, CdkDropList, transferArrayItem } from ‘@angular/cdk/drag-drop’; @Component({ selector: ‘cdk-drag-drop-custom-preview-example’, templateUrl: ‘cdk-drag-drop-custom-preview-example.html’, styleUrls: [‘cdk-drag-drop-custom-preview-example.css’], }) export class CdkDragDropCustomPreviewExample {
Continue readingAngular material 2 drag and drop orientation both directions
Issue Is it possible to make the orientation to sort in both directions for cdk-drag and drop? I am trying to make a dashboard that looks like grafana. That sorts the dragable items in both directions. And does anyone have
Continue readingDrop zone directive for Angular CDK drag-drop
Issue I am relatively new in Angular 2+ and I want to drag a div within another div. I am using Drag & Drop CDK and wrote the following code to do that; <div cdkDrop> <div cdkDrag class=”wrapper”> <header cdkDragHandle
Continue readingAngular CDK's OverlayModule, cdk-overlay-pane will not set position to absolute?
Issue I’m using Overlay Module of Angular’s CDK. And I just cannot find the way to add position: absolute to the overlay? The module will receive a top and a left position that matches the connected element position but the
Continue readinguse modified angular cdk module in other project locally
Issue I have forked, cloned and modified the angular material repository to suit my needs. Code in the dev-app runs fine. Now I want to use this module, more precisely the DragDropmodule of @angular/cdk, in another angular app I am
Continue readingAngular cdk scrolling: Updating Data Source not represented in view
Issue All my previous attempts of building an infinite scroller failed so far. The component I am currently working on uses Angular’s virtual scrolling and should update the data source when a certain index of the virtual scroll viewport is
Continue readingCdkDragAndDrop how to prevent dragging
Issue I’m trying to use the Angular Material CDK DragDrop module from https://material.angular.io/cdk/drag-drop/overview With the cdkDropListDropped event I can prevent dropping but it shouldn’t be dragged either. How can I tell a cdkDropList or each cdkDrag elements to disable dragging?
Continue readingChange Angular material overlay position dynamically after attaching
Issue Have a number of Overlays that need to re-position after window-resize event. The current initialy configured PositionStrategy has logic that is dependent on outside variables to align Overalys similar to CSS Grid / Flexbox behavior. This material2 github issue
Continue readingHow to bind "name" to a router-outlet to render dynamically created angular-cdk components
Issue I am generating dynamic angular components using angular-cdk and based on article blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular Trying to do this the only option seems feasible is to use named router-outlets like one below <router-outlet name=”outletname”></router-outlet> however here i can not bind the
Continue readingRemoving placeholder for drop area when cursor not in drop zone in material cdk drag & drop
Issue When drag item moves over the drop area, the area is highlighted and created a placeholder for the same. But if the mouse point is moving away the drop area and release the drop the item. It still drop
Continue readingmat-menu pierces through "cdk overlay fog"
Issue This STACKBLITZ (SB) shows the problem. CSS class .WHYYYYY shows the “two” problems I’m facing. in order for the mat-menu to open on hover I need to set z-index:1050; (ref 2 hacky workaround) on the menu buttons. this creates
Continue readingAngular ul, cdk-virtual-scroll-viewport list, keyboard selection
Issue Trying to create an Autocomplete component functionality. When a user starts typing, a small window pops up with options to select from. I would like the user to be able to pick an option using his keyboard. Example: –
Continue readingHow to create draggable and editable list items using @angular/cdk?
Issue I’m trying to create a horizontal draggable list with items that should be editable. For that I’m using the cdk package without material and with the attribute [contentEditable]=’true’. But the items are not editable. How do I get it
Continue readingRow index is not available in Angular CDK table
Issue I have a simple table like this <table cdk-table [dataSource]=”doors” [multiTemplateDataRows]=”true” class=”table table-hover”> <ng-container cdkColumnDef=”width”> <th cdk-header-cell *cdkHeaderCellDef>Width</th> <td cdk-cell *cdkCellDef=”let row; let idx = index;”> Index: [{{idx}}] <span *ngIf=”idx === undefined”>undefined</span> <span *ngIf=”idx === null”>null</span> </td> </ng-container> <tr
Continue readingAngular Material 7 Drag and Drop
Issue Can someone explain or maybe show me some code on how he would do the following: I have a match - with all assigned players to a team, then i have a starting eleven (11 placeholders on a map) and 7
Continue readingAngular CDK drag and drop lists break when their data is re-instantiated
Issue I have a cdkDropListGroup with multiple tables (with the mat-table directive) that I am trying to set up drag and drop so that elements within the table can be rearranged or dragged to another table. However, when the data
Continue readingAdd a new row into mat-table using angular 4
Issue How to add a new row into Angular Material table manually from a input field. Please see this image in that if i add a state name and state code it should present in the following table please help
Continue readingWhat is `cdk` in Angular Material 2 components
Issue In multiple places within angular material source, there are elements/ css classes that have cdk as their prefix. Does anyone know what the abbreviation for cdk in angular material context? Solution CDK is the short form of component dev
Continue readingAngular CDK Drag and Drop boundary
Issue I have a question about Angular 7 CDK drag & drop feature. What I want is the following: I need a resizable rectangle div inside a container which I want to use as the boundary element (cdkDragBoundary) for my
Continue readingAngularMaterial vertical stepper with cdkDropList issue with form input names
Issue I’m doing a dropList with angular material, and I have the following problem: Initialy: I’m using the index of the ngForm as the value for the attribute name of the form, if I change the position of the empty
Continue readingAngular Material: Remove item onDrop outside cdk component
Issue I am currently using angular material CDK DragAnDrop for some list functionalities. What I’m trying to accomplish is: I drag an element from List A and drop it into List B. If I drag the element from List B
Continue readingcdk Virtual Scrolling with HTML table
Issue I am very new to angular and have been stuck on this problem for more than a day now. Using Angular 7 and angular/cdk ver 7.3.4. What I am trying to accomplish seems very simple. I have a good
Continue readingHow to Pass CDK column and row definitions through a component
Issue I’m trying to pass column and row definitions through a component, and I’m not sure how to do it, or if its even possible. I want to do this, so (a) the client component can specify the data, columns
Continue readingItemsize of cdk virtual scroll
Issue I noticed when I put the itemSize of the cdk virutal scroll to a lower amount the loading time of the page is almost double the amount. There is a hugh differents between <cdk-virtual-scroll-viewport [itemSize]=”45″ and <cdk-virtual-scroll-viewport [itemSize]=”20″(a table
Continue readingUse angular-cdk table with bootstrap 4
Issue I’m using the Angular CDK table (without Angular Material2) and want to use bootstrap table design to style it. It is possible to add classes to the CDK table, but the bootsstrap rules directly address the html table elements
Continue readingAutomatic drag and drop when double clicking Angular
Issue In my application, I have two lists of items that can be transferred from one to the other with the DragDropModule from Angular Material. I wish I could use the drag and drop, but also used the double click
Continue readingHow to programmatically scroll to item with angular's material virtual scroll?
Issue I have a list that has many items and each item can be selected. For this I use Angular Material Virtual Scroll. When an item is selected, the selected item is highlighted and then is saved on the server.
Continue readingDisable a step in CDK Stepper / prevent to go back to previous step
Issue I have a CdkStepper in my Angular app – consisting of 4 steps – which behaves quite regularly. No step is optional, so you cannot jump over any step, but the user can always go back to the previous
Continue readingThere is no directive with "exportAs" set to "cdkStep"
Issue I get this error from karma/jasmin in my spec.ts: There is no directive with “exportAs” set to “cdkStep” <!– Step 1 –> <cdk-step [ERROR ->]#step1=”cdkStep”> <ng-template cdkStepLabel> <div class=”step-content”> <!– Step 2 –> <cdk-step [ERROR ->]#step2=”cdkStep”> <ng-template cdkStepLabel> <div
Continue readingAngular CDK drag and drop – is it possible to create circular boundary?
Issue Is it possible to restrict an Angular Drag and Drop element to a circular boundary? Looking at the documentation below Restricting movement within an element If you want to stop the user from being able to drag a cdkDrag
Continue readingAngular Cdk stepper, how to detect when new step added
Issue I have a custom stepper based on Cdk, but it is dynamic. So it is bound to a FormArray. When a item is added to the formArray I need to redirect to the newest step. CdkStepper doesn’t seem to
Continue readingcdk overlay default possition
Issue I’m using cdk overlay flexibleConnectedTo(origin). So it is open depends on free space, if there is not enough space at the bottom it is open at the top. But by default, if there is enough space at the top
Continue readingReposition CdkConnectedOverlay on scroll
Issue I’m trying to use CdkConnectedOverlay to display an overlay when a button is clicked. It’s mostly working, but the overlay is not re-positioning on scroll. I’m sure there’s something small I’m missing, but I can’t for the life of
Continue reading@ViewChild(CdkPortalOutlet) returns undefined in AfterViewInit
Issue Trying to query a ng-template with CdkPortalOutlet is always unsuccessful, and I cant understand why? <ng-template CdkPortalOutlet></ng-template> @ViewChild(CdkPortalOutlet) test: CdkPortalOutlet; stackblitz Solution In order to use CdkPortalOutlet directive in AppComponent template you have import PortalModule in AppModule(i.e. NgModule where
Continue readingAngular material container not expanding to fill page?
Issue I’m trying to follow this tutorial in creating a slide in navigation, and I have the following stackblitz. The side nav is toggleing, but it is not expanding to fit the page. IIUC this CSS class is supposed to
Continue readingGet drop position of item in cdkDropList
Issue I’m trying to get (or calculate) the x/y coordinates of a dropped item in an angular-material cdkDropList. I’ve studied the documentation https://material.angular.io/cdk/drag-drop/api#CdkDragDrop and found there should be a property called “distance” in the CdkDragDrop interface but I can’t find
Continue readingHow is cdkPortal different from ngTemplateOutlet
Issue Why should one use cdkPortal over the built-in directives ngTemplateOutlet and ngComponentOutlet in Angular. aren’t both of them provide the same functionality? Are there specific features in the CDK Portal that doesn’t come with the built-in directives? Solution If
Continue readingAngular Material: BreakpointObserver not available from load?
Issue While using the Angular BreakpointObserver in conjunction with Angular Material, I try to use Material Design-spec breakpoints (they’re defined in Breakpoints, for example Breakpoints.LandscapePortrait, Breakpoints.HandsetPortrait). The breakpointObserver works, except for when I freshly load the page. The breakpointObserver is
Continue readingTrying to make a custom multi select search component with mat-select-list in overlay
Issue I’m trying to make a custom Angular Material multiSelect filterable component, such as this one : I made a multi-select-search.component with this code : export interface MultiSelectSearchOption { label: string; value: any; } export interface MultiSelectOverlayData { options: MultiSelectSearchOption[];
Continue readingunable to use cdkDropConnectedTo property in library
Issue below is my code that i have added it in my html for drag and drop functionality in my project folder. that is i have created library using cli command ng generate library some-lib <div cdkDropList cdkDrop [cdkDropConnectedTo]=”otherProgramItems” [cdkDropData]=”progItem.items”
Continue readingAngular Material CDK Drop Event not fireing
Issue I’m trying to use Angular material to drag drop a free node. It’s not part of a list but I would like to know when the item has been dropped. I’m not sure how I can bind to this
Continue readingAngular CDK Layout – How to dynamically update CSS in response to screen-size changes?
Issue I’m setting up a code that detects the present breakpoint and updates the class accordingly. I’ve managed to get it working based on the initial value, but when the window size enlarges/shrinks, the Html class does not detect the
Continue readingCDK Infinite scroll end checking
Issue im trying to implement infinite scroll for loading items on to the list dynamically when user scrolls down the list, but when i access the end and total , it is coming as same, i need to check if
Continue readingGet parent hierarchy from a child node in angular 6 material tree
Issue I am following a tutorial to implement cdk tree in angular 6. I created a tree structure, now I want to get the parent hierarchy from from the child by making it clickable, while there are methods like getDescendants
Continue readingevent propagation cdk drag
Issue How can I prevent dragging when I’m inside my input and I’m dragging around. I only want the pink-meat to act as a drag-handle. !!! STACKBLITZ !!! html <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"> <div class="example-box" *ngFor="let movie of movies" cdkDrag>
Continue readingDifferentiate cdkDrag and click in angular
Issue I have a draggable element for which I have used cdkDrag and it is working fine for me. Now, I need to toggle a flag on click of the element. But when I drag the element and on drop
Continue readingHow to create droplist items dynamically with Angular8?
Issue I found plenty of trivial examples how to use the different draggable directives but now I want to do this progmatically. There is a minimal sample app that demonstrates the problem. It receives the “dropped” event but the previousIndex
Continue readingHow to dynamically pass content to ComponentPortal to be rendered by cdkPortalOutlet?
Issue I’ve got Angular CDK Portals working, in so far as I can dynamically create a portal-component, attach it to cdkPortalOutlet, and have it render the existing template, but I can’t figure out how to provide that portal-component with data.
Continue readingAngular 8 cdk get index
Issue I am working on Angular CDK drag and drop, when I am dropping an item into the list I can get index from previous list and the new index it has, how I will get the index of the
Continue readingAngular CDK Drag and Drop won't work after updating component's HTML
Issue I have a fresh system of Angular 8. There’s one Module with one Component: ng new my-app –enable-ivy npm install –save @angular/material @angular/cdk @angular/animations npm install –save hammerjs In the Module I’m adding: import { DragDropModule } from ‘@angular/cdk/drag-drop’;
Continue readingAngular CDK drag and drop issue inside CSS flexbox
Issue I ran into an issue using drag and drop module from the Angular CDK. I use it inside a container div which has (among others) the following CSS properties : display: flex; flex-wrap: wrap; The flex_wrap property is here
Continue readingAngular CDK: Apply animations to Angular custom stepper on step change
Issue I am stuck with animating the step change of the Angular material custom stepper using the CDK. I have followed the tutorial on how to implement the custom stepper. I have the demo here My template looks like: <section
Continue readingAngular CDK Portal, multiple Portals to one PortalOutlet?
Issue So as the title states, is it actually possible using Angular CDK portals/portalOutlets to attach multiple portals to one PortalOutlet, I’ve been digging through the CDK source code and can’t seem to find anything that indicates that it’s possible.
Continue readingHow do I configure a material cdk overlay position strategy that works great, both on big and small screens?
Issue Question How do I configure a material cdk overlay position strategy that works great, on big and small screens? Goal My objective is to create an overlay with the Angular overlay CDK, that follow these rules: Never position overlay
Continue readingAngular Material 2: Multiple mat-table sorting is working on first table only
Issue I have used Angular Material in my application and I have two mat-table with sorting on single component but my sorting is working only on first table here is ts code @ViewChild(MatSort) inventoryDataSort: MatSort; @ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator; @ViewChild(MatSort) additionalDataSort:
Continue readingImplement Angular CDK Virtual Scroll for Clarity datagrid rows
Issue I want to implement the datarid with the ability to have virtual scrolling. Can we use Angular CDK package for implementing virtual scrolling for Clarity datagrid rows? I tried adding CDK Virtual Scroll on the datagrid as same code
Continue readingAngular material referring object in one of the column
Issue I am using angular material to create a mat-table. and the data part looks like async ngOnInit() { const cardRsp:any = await this.dataSvc.fetchQueuedCards() CARD_DATA = [] for(let cRow of cardRsp){ // console.log(“::::adding:” + cRow._company) let c = new Card(cRow.key,
Continue readingAngular Material Tree with checkboxes – get checked and indeterminated value
Issue I’ve got almost 1 to 1 tree from this example: https://stackblitz.com/angular/nnxeaxmrdob?file=src%2Fapp%2Ftree-checklist-example.ts What i need is to get all the selected values and those which are indeterminate. I know, that all selected values are hold in checklistSelection variable, however the
Continue readingmatSort is not working with cdk-virtual-scroll-viewport
Issue I have used below code to render data in table while scrolling using cdk-virtual-scroll-viewport in Angular application. Material sorting feature has also been implemented using matSort. Please refer below code. table.component.html: <ng-container matColumnDef=”position”> <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
Continue readingmatSort is not working with cdk-virtual-scroll-viewport
Issue I have used below code to render data in table while scrolling using cdk-virtual-scroll-viewport in Angular application. Material sorting feature has also been implemented using matSort. Please refer below code. table.component.html: <ng-container matColumnDef=”position”> <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
Continue readingCan I get a cdkDrag element to emit a dropped event without cdkDragList container?
Issue I’m working moving an app from angularjs over to Angular 7. I have a map tool for keeping track of game pieces on a grid. Right now how it works is I listen for drag/drop events on each game
Continue readingAdd component dynamically with cdk/ComponentPortal
Issue I’m trying to add a component dynamically using cdk’s ComponentPortal @Component { selector: ‘my-app’, template: ‘<div #container></div>’, styleUrls: [ ‘./app.component.css’ ] } export class AppComponent { @ViewChild(‘container’, {read: ViewContainerRef, static: false}) container; ngAfterViewInit(): void { const dialogContent = new
Continue readingCdkDrag updating position
Issue I have multiple CdkDrag element that are rendered from a ngFor loop on an array in my component. when i remove one element i splice the array. Then some of the elements will update there position. how do i
Continue readingAngular CDK drag drop with mat tab group vertical
Issue So i created mat tab group that currently only work for tabs, but sub -tabs have problem that i will show you in gif. Only 1, 2 sub tab can’t be drag and dropped on them all other cases
Continue reading