How to implement Drawer panel expansion on click of angular components in Angular dart

Question

I am having a mini drawer component of angular components in my AngularDart project, and I want to implement the function of expanding the drawer panel width with the rotation of right arrow icon to 180degree while on click at the button positioned at the drawer bottom.

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

The template code can look like this:

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

The open arrow would need to go outside of the drawer since you want it to be shown when the drawer is closed. You would probably want this to be positioned at the bottom of the page so that it doesn't mess with the flow of the content, and hide it when the drawer is not visible.

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

It would be a bit weird to have the menu symbol at the top of the page also. Another possibility is to change that to an arrow that changes with an ngIf depending on drawer visibility.