How to dynamically set width & height in angular 2

Question

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>

Apple Orange · Accepted Answer · 2018-08-24 11:13:53Z

9

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>

edited Aug 24, 2018 at 11:13

Apple Orange

6865 gold badges13 silver badges28 bronze badges

answered Jul 20, 2018 at 7:32

Sanoj_V

2,9961 gold badge14 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Apple Orange Over a year ago

Working Good..Thanks

Apple Orange Over a year ago

Sanoj..I have one more question?

Sanoj_V Over a year ago

@AppleOrange yes, can you share??

Apple Orange Over a year ago

Sanoj: How we can create own jshint?

Apple Orange Over a year ago

Sanoj: From your example link How we can write code(in typescript) for open same like for close. After i click button i want to open particular popup.How do it?

|

Collectives™ on Stack Overflow

How to dynamically set width & height in angular 2

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related