Takumon/mean-blog

<div *ngIf="!(article$ | async)">
    <mat-progress-bar class="content__progressbar" mode="indeterminate"></mat-progress-bar>
</div>
<div  *ngIf="(article$ | async)" class="article">
  <div class="article__header header">
    <div class="header__title-wrapper">
      <h1 class="header__title">{{(article$ | async).title}}</h1>
    </div>
    <div class="header__spacer"></div>
    <div class="header__info-summary info-summary">
      <div class="info-summary__factor-wrapper">
        <div class="info-summary__factor_first">
          <div>
            <i class="info-summary__factor-icon fa fa-fw fa-thumbs-up"></i>
            <span class="info-summary__factor-count">{{(article$ | async).vote ? ((article$ | async).vote | excludeDeletedVoter).length : 0}}</span>
          </div>
          <div class="info-summary__factor-label">いいね</div>
        </div>
        <div class="info-summary__factor">
          <div>
            <i class="info-summary__factor-icon fa fa-fw fa-commenting"></i>
            <span class="info-summary__factor-count">{{!commentListComponent ? 0 :!commentListComponent.comments ? 0 : (commentListComponent.comments| excludeDeletedComment).length}}</span>
          </div>
          <div class="info-summary__factor-label">コメント</div>
        </div>
      </div>

      <div class="info-summary__vote-button-wrapper">
        <ng-container *ngIf="auth.isLogin()">
          <ng-container *ngIf="!containMineVote((article$ | async)?.vote)">
            <button
              mat-raised-button
              color="primary"
              (click)="registerVote()"
              >
              <i class="fa fa-fw fa-thumbs-up"></i><span>  いいね</span>
            </button>
          </ng-container>
          <ng-container *ngIf="containMineVote((article$ | async)?.vote)">
            <button
              mat-raised-button
              (click)="deleteVote()"
              >
              <i class="fa fa-fw fa-check"></i><span>  いいね済み</span>
            </button>
          </ng-container>
        </ng-container>
      </div>
      <div *ngIf="(article$ | async).vote" class="info-summary__voter-icons">
        <div
          *ngFor="let voter of ((article$ | async).vote | excludeDeletedVoter)"
          class="info-summary__voter-icon-wrapper"
          >
            <img
              matTooltip="{{voter.userId}}"
              [routerLink]="['/users', voter.userId, 'articles']"
              class="info-summary__voter-icon"
              lazyLoad="/api/images/avator/{{ voter._id}}"
              [offset]="this.Constant.LAZY_LOAD_OFFSET"
              >
        </div>
      </div>
    </div>
  </div>
  <div class="article__metadata">
    <img
      class="article__author-icon"
      [routerLink]="['/users', (article$ | async).author.userId, 'articles']"
      lazyLoad="/api/images/avator/{{(article$ | async).author._id}}"
      [offset]="this.Constant.LAZY_LOAD_OFFSET"
      >
    <div
      class="article__author"
      [routerLink]="['/users', (article$ | async).author.userId, 'articles']">{{(article$ | async).author.userId}}</div>
    <div class="article__updated">{{(article$ | async).updated | date: 'yyyy/MM/dd HH:mm' }} に{{(article$ | async).created == (article$ | async).updated ? "投稿" : "更新" }}</div>
    <div class="article__operation">
      <ng-container *ngIf="isMine((article$ | async))">
        <button
          mat-button
          [routerLink]="['/drafts', (article$ | async)._id, 'edit']"
          routerLinkActive="active">
          <i class="fa fa-fw fa-pencil-square"></i><span>  編集</span>
        </button>
        <span class="spacer"></span>
        <button
          mat-button
          [matMenuTriggerFor]="menu">
          <i class="fa fa-fw fa-cog"></i>  設定
        </button>
        <mat-menu #menu="matMenu">
          <div mat-menu-item disabled></div>
          <a mat-menu-item (click)="deleteArticle()">
            <i class="fa fa-fw fa-trash-o"></i><span>  削除</span>
          </a>
        </mat-menu>
    </ng-container>

    </div>
  </div>
  <div class="article__main">
    <div class="article__main__content">
      <div *ngIf="(article$ | async).isMarkdown; then markdown else plainText"></div>
      <ng-template #markdown>
        <p
          #markdownText
          [innerHTML]="text | safeHtml"
          class="markdown-body"></p>
      </ng-template>
      <ng-template #plainText>
        <pre [innerHTML]="text" class="plain-text-body"></pre>
      </ng-template>
    </div>

    <ng-container *ngIf="showToc">
      <div class="article__main__toc">
        <app-article-toc
        [toc]="toc"
        [title]="(article$ | async).title"
        [baseUrl]="baseUrl"
        ></app-article-toc>
      </div>
  </ng-container>

  </div>
</div>

<div  *ngIf="(article$ | async)" class="comments">
  <app-comment-list
    _idOfArticle="{{(article$ | async)._id}}"
  ></app-comment-list>
</div>