friends.html

<style>
@import "/bower_components/angular-material/angular-material.css";
</style>
<section id="friends-app">
    <header id="header">
        <md-content class="md-padding">
            <h1>My Friends</h1>
        </md-content>
    </header>
    <section id="main">
        <md-content>
            <md-card !foreach="#friend in friends">
                <md-item>
                    <md-item-content>
                        <div class="md-tile-left">
                            <img src="icon-person-128.png" class="face">
                        </div>
                        <div class="md-tile-content">
                            <h2>{{friend.name}}</h2>
                            <h3>{{friend.age}} Years Old</h3>
                            <div>
                                <h4>
                                  <button (click)="toggleDetails(friend)">{{ friend.showDetails ? 'Hide Details' : 'Show Details'}}</button>
                                </h4>
                                <div [hidden]="!friend.showDetails">
                                    <p>Where we met: {{friend.whereWeMet}}</p>
                                    <p>How we met: {{friend.howWeMet}}</p>
                                </div>
                            </div>
                        </div>
                    </md-item-content>
                </md-item>
            </md-card>
        </md-content>
    </section>
    <footer id="footer">
    </footer>
</section>
<footer id="info">
</footer>