czeckd / angular-basic-modal Goto Github PK

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).

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.!