如何将这个JS代码转换为Angular 4代码

时间:2018-02-27 10:27:54

标签: angular

如何将以下代码转换为Angular 4代码

如果有一种简单的方法可以在点击它后旋转div +90度,然后在下次返回0度时点击它

$('.square').click(function() {
    $(this).toggleClass('rotate-90');
});
.square {
  width: 150px;
  height: 100px;
  background-color: red;
}

.rotate-90 { 
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square">
  
</div>

1 个答案:

答案 0 :(得分:0)

HTML

<div class="square" (click)="toggle()" [class.rotate-90]="isToggled">

</div>

TS

public isToggled:boolean;
toggle(){
    this.isToggled = !this.isToggled;
}