CODEWITHSUNDEEP
angular
JustLearning
JustLearning

Reputation: 3322

angular 4 modal directive change size

I am trying to change bs modal size dynamically via the class property as indicated in the documentation, but cannot seem to get it to change size.

This is my html:

<div class="modal fade" id="imola-small-modal" bsModal #registrationModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" id="imola-small-modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left" i18n>{{PopupContent.PopupText}}</h4>
                <button type="button" class="close pull-right" aria-label="Close" (click)="registrationModal.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" (click)="$event.stopPropagation(); false;">
                <div [dynamiccontent]="PopupContent.BodyRichtext"></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" (click)="PopupContent.OnOkay(); registrationModal.hide();" i18n>{{PopupContent.OkaybuttonLabel}}</button>
                <button class="btn btn-default" *ngIf="PopupContent.IsCloseButtonShown" (click)="registrationModal.hide();" i18n>Close</button>
            </div>
        </div>
    </div>
</div>

This is the appcomponent.ts:

@ViewChild('registrationModal') public registrationModal: ModalDirective;

public ngOnInit(){
            this.registrationModal.config = new ModalOptions();
            this.registrationModal.config.class = 'modal-lg';
            this.registrationModal.show();

}

So the modal is showing, but is always small modal (as i hardcoded it in html). Any suggestions

Upvotes: 0

Views: 420

Answers (1)

Pragnesh Khalas
Pragnesh Khalas

Reputation: 2898

I am not clear about the model property (config.class) because this property is not used in your template html.

But I have one work around for your question.

You need to create one property for model size which is the class name and apply this class name on run time so you will get your expected output.

Like –

You need to change below line

From

<div class="modal-dialog modal-sm">

To

<div class="modal-dialog {{modelClass}}">

And in the .ts side you need to create public property

modelClass:string="modal-sm";

and change this property in the ngOnInit event.

public ngOnInit(){
   this.modelClass = "modal-lg";

Upvotes: 1

Related Questions