CODEWITHSUNDEEP
angularangular-materialdialogdraggable
Justin
Justin

Reputation: 1120

Angular material Dragable dialogbox is not working

I have a draggable dialogbox, it doesn't work. But I have similar working code on another project.

My main code:

<div cdkDrag cdkDragRootElement=".cdk-overlay-pane" >
    <h2 mat-dialog-title cdkDragHandle> Justin Wu</h2>
</div>
<label>I am a {{ position}}</label>
<div>
    <button class="close" mat-button (click)="closeDialog()">Close</button> 
    <button class="save" mat-button  (click)="closeDialog()">Save</button>
</div>

You can find a demo from here: http://www.justa999.com/angular/#/profile

You will see it after you click that "About me" button

You can debug source code from profile.component.ts

My version:

{
"@angular-devkit/build-angular": "~0.901.0",
"@angular/cli": "~9.1.0",
"@angular/compiler-cli": "~9.1.0",
"@angular/language-service": "~9.1.0",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.12.62",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}

Upvotes: 0

Views: 1129

Answers (3)

Justin
Justin

Reputation: 1120

Fixed this issue by myself:

First, you must add your content into 

<mat-dialog-content>
    <label>I am a {{ position}} </label>
</mat-dialog-content>

Second, you must declare your dialog component in app.module.ts

@NgModule({
  declarations: [
    ModalContentComponent,

Upvotes: 0

Sruthish
Sruthish

Reputation: 53

Angular Modal and CDK Drag gets overlap often, you can use a normal div and set its css

position: absolute;
left: 50px;
top: 50px;

so it appears as a modal, cdkdrag works.

Upvotes: 0

Marcin Milewicz
Marcin Milewicz

Reputation: 315

Try

<h2 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle> Justin Wu</h2>
<div mat-dialog-content >
<label>I am a {{ position}}</label>
</div>
<div mat-dialog-actions>
   <button class="close" mat-button (click)="closeDialog()">Close</button> 
   <button class="save" mat-button  (click)="closeDialog()">Save</button>
</div>

Upvotes: 0

Related Questions