CODEWITHSUNDEEP
angularangular5
Apple Orange
Apple Orange

Reputation: 686

How to dynamically set width & height in angular 2

I have created global popup components.I want to set width and height anf title dynamically.How do it? modal:

<app-m [(visible)]="show" title="Modal" data-popup="width:300;height:250">
<h1>Sample Title 1</h1>
<button (click)="show= !show" class="btn">Close</button>
</app-m>

Upvotes: 5

Views: 18207

Answers (1)

Sanoj_V
Sanoj_V

Reputation: 2986

You can do it with decorators. Pass height, width and title model to <app-dialog> like this:

Now in dialog.component.html should be:

<div [@modal] *ngIf="visible" class="dialog" [ngStyle]="{'width': width+'px', 'height': height+'px'}">
    <b>{{title}}</b>
    <ng-content></ng-content>
    <button *ngIf="closable" (click)="close()" aria-label="Close" class="cls">X</button>
</div>
<div *ngIf="visible" class="overlay" (click)="close()"></div>

Upvotes: 9

Related Questions