ngx-bootstrap modal (ng6/bs4) with used with angular2-draggable, doesn't drag the entire modal just what's...
So, I have an app that's done in ng6 and bs4.x
I've installed angular2/draggable from here: Angular Draggable
And I've used the example for modal here: ngx-bootstrap/modal
If you scroll down to: Component#, you'll see the example which I've put below.
THE TEMPLATE:
<button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Create modal with component</button>
THE COMPONENT:
import { Component, OnInit } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'demo-modal-service-component',
templateUrl: './service-component.html'
})
export class DemoModalServiceFromComponent {
bsModalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModalWithComponent() {
const initialState = {
list: [
'Open a modal with component',
'Pass your data',
'Do something else',
'...'
],
title: 'Modal with component'
};
this.bsModalRef = this.modalService.show(ModalContentComponent, {initialState});
this.bsModalRef.content.closeBtnName = 'Close';
}
}
/* This is a component which we pass in modal*/
@Component({
selector: 'modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title pull-left">{{title}}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul *ngIf="list.length">
<li *ngFor="let item of list">{{item}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="bsModalRef.hide()">{{closeBtnName}}</button>
</div>
`
})
export class ModalContentComponent implements OnInit {
title: string;
closeBtnName: string;
list: any = ;
constructor(public bsModalRef: BsModalRef) {}
ngOnInit() {
this.list.push('PROFIT!!!');
}
}
The DRAGGABLE feature DOES WORK but in my example, this is what happens:
Finally, here's my @component({...})
Which I used to replace the basic modal in the code for ngx-bootstrap as shown above...
Please advise...
bootstrap-4 angular6 ngx-bootstrap
asked Nov 14 '18 at 17:32
Peter The Angular DudePeter The Angular Dude
4981826
add a comment |
So, I have an app that's done in ng6 and bs4.x
I've installed angular2/draggable from here: Angular Draggable
And I've used the example for modal here: ngx-bootstrap/modal
If you scroll down to: Component#, you'll see the example which I've put below.
THE TEMPLATE:
<button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Create modal with component</button>
THE COMPONENT:
import { Component, OnInit } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'demo-modal-service-component',
templateUrl: './service-component.html'
})
export class DemoModalServiceFromComponent {
bsModalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModalWithComponent() {
const initialState = {
list: [
'Open a modal with component',
'Pass your data',
'Do something else',
'...'
],
title: 'Modal with component'
};
this.bsModalRef = this.modalService.show(ModalContentComponent, {initialState});
this.bsModalRef.content.closeBtnName = 'Close';
}
}
/* This is a component which we pass in modal*/
@Component({
selector: 'modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title pull-left">{{title}}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul *ngIf="list.length">
<li *ngFor="let item of list">{{item}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="bsModalRef.hide()">{{closeBtnName}}</button>
</div>
`
})
export class ModalContentComponent implements OnInit {
title: string;
closeBtnName: string;
list: any = ;
constructor(public bsModalRef: BsModalRef) {}
ngOnInit() {
this.list.push('PROFIT!!!');
}
}
The DRAGGABLE feature DOES WORK but in my example, this is what happens:
Finally, here's my @component({...})
Which I used to replace the basic modal in the code for ngx-bootstrap as shown above...
Please advise...
bootstrap-4 angular6 ngx-bootstrap
asked Nov 14 '18 at 17:32
Peter The Angular DudePeter The Angular Dude
4981826
me also facing same issue,
– Fai Zal Dong
Jan 29 at 8:53
add a comment |
So, I have an app that's done in ng6 and bs4.x
I've installed angular2/draggable from here: Angular Draggable
And I've used the example for modal here: ngx-bootstrap/modal
If you scroll down to: Component#, you'll see the example which I've put below.
THE TEMPLATE:
<button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Create modal with component</button>
THE COMPONENT:
import { Component, OnInit } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'demo-modal-service-component',
templateUrl: './service-component.html'
})
export class DemoModalServiceFromComponent {
bsModalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModalWithComponent() {
const initialState = {
list: [
'Open a modal with component',
'Pass your data',
'Do something else',
'...'
],
title: 'Modal with component'
};
this.bsModalRef = this.modalService.show(ModalContentComponent, {initialState});
this.bsModalRef.content.closeBtnName = 'Close';
}
}
/* This is a component which we pass in modal*/
@Component({
selector: 'modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title pull-left">{{title}}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul *ngIf="list.length">
<li *ngFor="let item of list">{{item}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="bsModalRef.hide()">{{closeBtnName}}</button>
</div>
`
})
export class ModalContentComponent implements OnInit {
title: string;
closeBtnName: string;
list: any = ;
constructor(public bsModalRef: BsModalRef) {}
ngOnInit() {
this.list.push('PROFIT!!!');
}
}
The DRAGGABLE feature DOES WORK but in my example, this is what happens:
Finally, here's my @component({...})
Which I used to replace the basic modal in the code for ngx-bootstrap as shown above...
Please advise...
bootstrap-4 angular6 ngx-bootstrap
asked Nov 14 '18 at 17:32
Peter The Angular DudePeter The Angular Dude
4981826
So, I have an app that's done in ng6 and bs4.x
I've installed angular2/draggable from here: Angular Draggable
And I've used the example for modal here: ngx-bootstrap/modal
If you scroll down to: Component#, you'll see the example which I've put below.
THE TEMPLATE:
<button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Create modal with component</button>
THE COMPONENT:
import { Component, OnInit } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'demo-modal-service-component',
templateUrl: './service-component.html'
})
export class DemoModalServiceFromComponent {
bsModalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModalWithComponent() {
const initialState = {
list: [
'Open a modal with component',
'Pass your data',
'Do something else',
'...'
],
title: 'Modal with component'
};
this.bsModalRef = this.modalService.show(ModalContentComponent, {initialState});
this.bsModalRef.content.closeBtnName = 'Close';
}
}
/* This is a component which we pass in modal*/
@Component({
selector: 'modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title pull-left">{{title}}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul *ngIf="list.length">
<li *ngFor="let item of list">{{item}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="bsModalRef.hide()">{{closeBtnName}}</button>
</div>
`
})
export class ModalContentComponent implements OnInit {
title: string;
closeBtnName: string;
list: any = ;
constructor(public bsModalRef: BsModalRef) {}
ngOnInit() {
this.list.push('PROFIT!!!');
}
}
The DRAGGABLE feature DOES WORK but in my example, this is what happens:
Finally, here's my @component({...})
Which I used to replace the basic modal in the code for ngx-bootstrap as shown above...
Please advise...
bootstrap-4 angular6 ngx-bootstrap
bootstrap-4 angular6 ngx-bootstrap
asked Nov 14 '18 at 17:32
Peter The Angular DudePeter The Angular Dude
4981826
asked Nov 14 '18 at 17:32
Peter The Angular DudePeter The Angular Dude
4981826
asked Nov 14 '18 at 17:32
Peter The Angular DudePeter The Angular Dude
4981826
asked Nov 14 '18 at 17:32
Peter The Angular DudePeter The Angular Dude
4981826
asked Nov 14 '18 at 17:32
Peter The Angular DudePeter The Angular Dude
4981826
4981826
me also facing same issue,
– Fai Zal Dong
Jan 29 at 8:53
add a comment |
me also facing same issue,
– Fai Zal Dong
Jan 29 at 8:53
me also facing same issue,
– Fai Zal Dong
Jan 29 at 8:53
me also facing same issue,
– Fai Zal Dong
Jan 29 at 8:53
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53305815%2fngx-bootstrap-modal-ng6-bs4-with-used-with-angular2-draggable-doesnt-drag-th%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53305815%2fngx-bootstrap-modal-ng6-bs4-with-used-with-angular2-draggable-doesnt-drag-th%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
me also facing same issue,
– Fai Zal Dong
Jan 29 at 8:53