Angular Dartの角度コンポーネントをクリックして引き出しパネルを展開する方法

Question

AngularDartプロジェクトで角度コンポーネントのミニ引き出しコンポーネントを使用していますが、私は引き出しパネルの幅を右回転で拡張する機能を実装したい引き出し底部に配置されたボタンをクリックすると、矢印アイコンが180度に変わる。テンプレートのコードは次のように見ることができ

app_component.html

<material-content> 
    <header class="material-header shadow"> 
     <div class="material-header-row"> 
      <material-button icon 
          class="material-drawer-button" (trigger)="drawer.toggle()"> 
       <material-icon icon="menu"></material-icon> 
      </material-button> 
      <span class="material-header-title">Tushar Rai</span> 
      <div class="material-spacer"></div> 
      <nav class="material-navigation" id="twitter"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/twitter-white.png"> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="google-plus"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/google-plus-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="facebook"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/facebook-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="pinterest"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/pinterest-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="instagram"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/instagram-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="youtube"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/youtube-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="quora"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/quora-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="linkedin"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/linkedin-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="github"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/github-white.png"/> 
       </a> 
      </nav> 
     </div> 
    </header> 

    <material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null"> 
     <material-list *deferredContent> 
      <div group class="mat-drawer-spacer"></div> 
      <div group> 
       <material-list-item> 
        <material-icon icon="home"></material-icon>Home 
       </material-list-item> 
       <material-list-item> 
        <material-icon icon="work"></material-icon>Work 
       </material-list-item> 
       <material-list-item> 
        <material-icon icon="account_circle"></material-icon>About 
       </material-list-item> 
       <material-list-item> 
        <material-icon icon="contact_mail"></material-icon>Contact 
       </material-list-item> 
      </div> 

      <div group class="navigation-resize"> 
       <material-button icon> 
        <material-icon icon="arrow_right"></material-icon> 
       </material-button> 
      </div> 
     </material-list> 


    </material-drawer> 

    <div class="app-layout"> 
     <p>Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
      et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
      veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
      legere iriure blandit. Veri iisque accusamus an pri. 
     </p> 
    </div> 
    <footer-layout></footer-layout>[![enter image description here][1]][1] 
</material-content> 

app_component.css

material-content material-drawer { 
    position: fixed; 
} 

material-content header { 
    position: fixed; 
} 

material-drawer { 
    max-width: 56px; 
} 

.social-icon-image { 
    width: 16px; 
    height: 16px; 
} 

.material-navigation:hover { 
    width: 24px; 
    height: 24px; 
    padding: 8px; 
    text-align: center; 
    border-radius: 24px; 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition: .5s; 
} 

#twitter:hover {background-color: #00aced;} 
#facebook:hover {background-color: #3b5998;} 
#google-plus:hover {background-color: #dd4b39;} 
#pinterest:hover {background-color: #cb2027;} 
#instagram:hover {background-color: #bc2a8d;} 
#linkedin:hover {background-color: #007bb6;} 
#youtube:hover {background-color: #bb0000;} 
#quora:hover {background-color: #a82400;} 
#tumblr:hover {background-color: #32506d;} 
#flickr:hover {background-color: #ff0084;} 
#dribbble:hover {background-color: #ea4c89;} 
#foursquare:hover {background-color: #0072b1;} 
#medium:hover {background-color: #00ab6c;} 
#github:hover {background-color:#767676;} 

.app-layout { 
    padding-top: 72px; 
    padding-left: 72px; 
    padding-bottom: 16px; 

} 

.navigation-resize { 
    width: 56px; 
    position: absolute; 
    bottom: 0; 
    margin-bottom: 8px; 
} 

.navigation-resize material-button { 
    float: right; 
} 

Answer 1

：

<div group class="navigation-resize"> 
    <material-button icon (trigger)="drawer.toggle()"> 
    <material-icon icon="arrow_right"></material-icon> 
    </material-button> 
</div> 

オープン矢印は外に行く必要があるだろう引き出しが閉じているときに表示したいので、引き出しd。おそらく、コンテンツの流れを混乱させず、引き出しが見えないときに隠すように、ページの下部に配置することをお勧めします。

<material-button icon *ngIf="drawer.visible == false" (trigger)="drawer.toggle()"> 
    <material-icon icon="arrow_left"></material-icon> 
    </material-button> 

ページの上部にもメニュー記号が表示されるのはちょっと変わってしまいます。別の可能性は、ドロワの視認性に応じて変化する矢印に変更することです。