<stbui-base-layout>
    <stbui-base-layout-header color="primary" class="title">
        Angular Ivy change detection execution: are you prepared?
    </stbui-base-layout-header>

    <stbui-base-layout-toolbar class="toolbar toolbar-detail">
        <div class="icon-group">
            <button class="back" mat-icon-button matTooltip="返回">
                <mat-icon>arrow_back</mat-icon>
            </button>
        </div>
        <div class="icon-group">
            <button class="archive" mat-icon-button matTooltip="喜欢">
                <mat-icon>favorite_border</mat-icon>
            </button>
            <button class="spam" mat-icon-button matTooltip="评论">
                <mat-icon>announcement</mat-icon>
            </button>
            <button class="delete" mat-icon-button matTooltip="分享" [matMenuTriggerFor]="shareOptions">
                <mat-icon>share</mat-icon>
            </button>
        </div>
        <div class="icon-group">
            <button class="archive" mat-icon-button matTooltip="移动到">
                <mat-icon>folder</mat-icon>
            </button>
            <button class="spam" mat-icon-button matTooltip="标签" [matMenuTriggerFor]="mailLabels">
                <mat-icon>label</mat-icon>
            </button>
            <button class="delete" mat-icon-button matTooltip="删除">
                <mat-icon>delete</mat-icon>
            </button>
        </div>
        <button class="delete" mat-icon-button matTooltip="更多">
            <mat-icon>more_vert</mat-icon>
        </button>
        <span fxFlex></span>
        <span>1 - 25 of 0</span>
        <div class="chevrons">
            <button mat-icon-button>
                <mat-icon>chevron_left</mat-icon>
            </button>
            <button mat-icon-button>
                <mat-icon>chevron_right</mat-icon>
            </button>
        </div>

        <mat-menu #shareOptions="matMenu">
            <button mat-menu-item>
                <mat-icon>label</mat-icon>QQ </button>
            <button mat-menu-item>
                <mat-icon>label</mat-icon>微博 </button>
            <mat-divider></mat-divider>
            <button mat-menu-item>
                <mat-icon>label</mat-icon>facebook </button>
            <button mat-menu-item>
                <mat-icon>label</mat-icon>twitter </button>
        </mat-menu>

        <mat-menu #mailLabels="matMenu">
            <button mat-menu-item>
                <mat-icon>markunread_mailbox</mat-icon>标记未读 </button>
            <button mat-menu-item>
                <mat-icon>label</mat-icon> 标签 </button>
            <mat-divider></mat-divider>
            <button mat-menu-item>
                <mat-icon>delete</mat-icon> 删除 </button>
        </mat-menu>

    </stbui-base-layout-toolbar>

    <div class="main">
        <p>Let’s see what Angular cooks for us</p>
        <p>While new Ivy renderer is not feature completely yet, many people wonder how it will work and what changes it prepares
            for us.
        </p>
        <p>In this article I am going to visualize Ivy change detection mechanism, show some things I am really excited about
            and also build simple app based on instructions, similar to angular Ivy instructions, from scratch.</p>

        <p>First, let’s introduce the app I’m going to investigate here:</p>
        <p>
            <img src="https://cdn-images-1.medium.com/max/1600/1*APIvDKSWiiMY3EZlxM5epQ.png" alt="">
        </p>
        <p>I created online demo that I use to understand how it works under the hood:

        </p>
        <p> https://alexzuza.github.io/ivy-cd/ 👈</p>
        <p>
            <img src="https://cdn-images-1.medium.com/max/2000/1*3BVrVntaULzadpLVVjpEhg.gif" alt="">
        </p>

        <p>The demo uses angular 6.0.1 aot compiler. You can click on any lifecycle block to go to the definition.</p>

        <p>In order to run change detection process just type something in one of those inputs that are below Sub-Child.</p>

        https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c
    </div>
</stbui-base-layout>

.title {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 24px;
}

.main {
  img {
    max-width: 100%;
  }
}

.toolbar {
  .chevrons {
    margin-left: 16px;
  }
}

.toolbar-detail {
  .icon-group {
    border-right: 1px solid #eee;
  }

  .back {
    margin-left: -12px;
    margin-right: 12px;
  }

  .archive {
    margin-left: 12px;
    margin-right: 6px;
  }

  .spam {
    margin-left: 6px;
    margin-right: 6px;
  }

  .delete {
    margin-left: 6px;
    margin-right: 12px;
  }

  .move {
    margin-left: 12px;
    margin-right: 6px;
  }

  .label {
    margin-left: 6px;
    margin-right: 12px;
  }

  .options {
    margin-left: 12px;
    margin-right: 12px;
  }
}