How to dynamically change fxFlex value in Angular5 on a static screen-size?

北城余情 提交于 2020-07-08 07:48:40

问题


I have two columns as below and I wanted to dynamically swap/change fxFlex value onClick of a button. I know that if you resize screen, fxFlex.md/lg etc will kick-in which I was able to accomplish. But am trying to understand how to change the fxFlex values on a static screen-size on some event like button-click.

<div flexLayout="row">
  <div fxFlex="fxFlexForCol1" style="background-color: green">
    <button mat-raised-button (click)="swapViewableArea()">Click to enlarge view {{fxFlexForCol1}}</button>
  </div>
  <div fxFlex="fxFlexForCol2" style="background-color: red">
      <button mat-raised-button (click)="swapViewableArea()">Click to enlarge view {{fxFlexForCol2}}</button>
    </div>

  swapViewableArea() {
    const temp = this.fxFlexForCol1;
    this.fxFlexForCol1 = this.fxFlexForCol2;
    this.fxFlexForCol2 = temp;
  }

On button-click I see that fxFlexForCol1 and fxFlexForCol2 values are swapped but flexLayout doesn't reflect the same in the UI-layout

Any advise please.


回答1:


You need to bind fxFlex to your property.

Replaced fxFlex with [fxFlex]=“property”




回答2:


Figured it! Just use curly brace!

<div flexLayout="row">
  <div fxFlex={{fxFlexForCol1}} style="background-color: green">
    <button mat-raised-button (click)="swapViewableArea()">Click to enlarge view {{fxFlexForCol1}}</button>
  </div>
  <div fxFlex={{fxFlexForCol2}} style="background-color: red">
    <button mat-raised-button (click)="swapViewableArea()">Click to enlarge view {{fxFlexForCol2}}</button>
  </div>
</div>


来源:https://stackoverflow.com/questions/49602576/how-to-dynamically-change-fxflex-value-in-angular5-on-a-static-screen-size

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!