CODEWITHSUNDEEP
htmlcssangulartypescriptmodal-dialog
Geoff
Geoff

Reputation: 6649

Angular2 modal popup positioning left

Am using This modal in angular2 and i would like to position the modal popup to the left this is what ive tried

<modal #categoriesmodal [cssClass]="modalchecklist">
  <modal-header [show-close]="true">
    <h4 class="modal-title">I'm a modal!</h4>
  </modal-header>
  <modal-body>
    Hello World!
  </modal-body>
  <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>

On the css class

.modalchecklist{
  position:absolute;
  top:0;
 left:0

}

Ive tried adding //background color:red on the css class but this fails and adds the css to the background document not on the modal

Where am i going wrong on the css classes

Ive checked also on the chrome developer tools but they too dont solve the issue.

What could be wrong

Upvotes: 0

Views: 569

Answers (1)

tao
tao

Reputation: 90188

To apply a style attribute in Angular2 you can use the [style] directive, like this

<what-ever [style.backgroundColor]="'red'">I am red</what-ever>

To apply a class, use ngClass:

<what-ever [ngClass]="'first'"><what-ever>
<what-ever [ngClass]="['first', 'second']"></what-ever>
<what-ever [ngClass]="{'first':true, 'second':conditionExp}"><what-ever>

See the ngClass link above for multiple syntax options and using expressions.

Please note all these methods are directives and, being directly bound to the scope, they expect expressions. In order to pass strings, you need to qualify your expression as string: use single-quotes inside double-quotes, and they'll be correctly evaluated as strings.

Upvotes: 1

Related Questions