czeckd / angular-basic-modal Goto Github PK
View Code? Open in Web Editor NEWAngular 2+ provider to add and display basic modal dialogs.
License: MIT License
Angular 2+ provider to add and display basic modal dialogs.
License: MIT License
Hi
I'm, trying to use your dialog component and it compiles fine but it the browser console I'm getting this error,
Error: No provider for BaseModalConfig!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.throwOrNull (core.es5.js:2649)
at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey (core.es5.js:2620)
at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9476)
at _createClass (core.es5.js:9522)
at _createProviderInstance$1 (core.es5.js:9487)
at resolveNgModuleDep (core.es5.js:9472)
Hi,
I'm trying to show an iFrame in the modal window without success. The SafeResourceUrl is sanitized since it is passed to the base-modal component as a string. In order to show an iFrame with external content in the modal window, the src must be as SafeResourceUrl.
Any idea how to get this working?
Best regards,
Jim
constructor(private modal:SimpleModal, private sanitizer: DomSanitizer) {
this.dangerousVideoUrl = "https://www.youtube.com/embed/XGSy3_Czz8k";
this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousVideoUrl);
}
ngOnInit() {
this.bmc.title = "Title";
this.bmc.message = "<iframe width='640' height='390' [src]='"+this.videoUrl+"'></iframe>";
this.bmc.type = SimpleModalType.Default;
this.bmc.width = 1000;
this.bmc.height = 605;
}
If for example you wanted to set the modal's body to a form you must accept the type SafeHtml which is built-in Angular security.
https://angular.io/guide/security#sanitization-example
Try setting BaseModal.message to '<input>'
It won't display anything and the console will log the following:
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
let template:string = this.template + '<div class="modal-background" (click)="cancel()"></div>';
/*let template:string = `<div (click)="$event.stopPropagation()">`+
this.template +
`</div>
<div class="modal-background" (click)="cancel()"></div>`*/;
Hi,
I want know if i can use it to show my form inside modal.
On this line i show the form, a dynamic form:
https://github.com/prsolucoes/goci/blob/support-angular2/resources/web-app/app/project-view/project-view.component.ts#L99
But it shows on HTML, hiding one div and showing the form div that is my component called TaskOptions:
https://github.com/prsolucoes/goci/tree/support-angular2/resources/web-app/app/task-options
Can you help me? I use your component with success with string modal content like in examples.
Hello Team,
I need to know how do I pass the data from component to the basic modal popup while opening the same.
As i need to pass on the data and will be utilised with the save button functionality available in modal popup component.
Thanks in advance.
Kind Regards,
Kunal Kakkad
https://cl.ly/252A130m370X
import { BaseModalConfig, BaseModal, BasicModalService } from 'angular-basic-modal';
WARNING in ./src/app/modal/modal.component.ts
22:23-38 "export 'BaseModalConfig' was not found in 'angular-basic-modal'
WARNING in ./src/app/modal/modal.component.ts
35:40-49 "export 'BaseModal' was not found in 'angular-basic-modal'
WARNING in ./src/app/modal/modal.component.ts
66:57-74 "export 'BasicModalService' was not found in 'angular-basic-modal'
WARNING in ./src/app/modal/modal.component.ts
66:94-111 "export 'BasicModalService' was not found in 'angular-basic-modal'
angular/cli: 1.1.1
node: 7.7.4
os: darwin x64
angular/common: 4.2.3
angular/compiler: 4.2.3
angular/core: 4.2.3
angular/forms: 4.2.3
angular/http: 4.2.3
angular/platform-browser: 4.2.3
angular/platform-browser-dynamic: 4.2.3
angular/router: 4.2.3
angular/cli: 1.1.1
angular/compiler-cli: 4.2.3
When I set the size of the modal, it doesn't apply it. The height adapts to the content of my template, but the width doesn't change.
public newQuestion() {
this.bmc.title = 'Nieuwe vraag';
this.bmc.message = '';
this.bmc.width = 1200;
this.bmc.height = 800;
this.bmc.cancelBtn = 'Annuleren';
this.bmc.confirmBtn = 'Ik weet het zeker';
this.bmc.blocking = false;
this.modal.show(this.bmc, QuestionModalComponent).then(res => {
console.log(res);
});
}
import {Component} from '@angular/core';
import {BaseModal} from 'angular-basic-modal/base-modal.component';
import {BaseModalConfig} from 'angular-basic-modal/base-modal-config';
@Component({
selector: 'bs-modal',
templateUrl: './question-modal.component.html',
})
export class QuestionModalComponent extends BaseModal {
constructor(bmc: BaseModalConfig) {
super(bmc);
}
}
Right now, if the users click confirm/cancel button on the modal, it just close the modal. How can it pass any result back to the component? so the component can perform any actions based upon confirm/cancel.
Please help.!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.