Takumon/mean-blog

<div class="search-condition">
  <div class="search-condition__header">
    <div class="search-condition__header__title">お気に入り検索条件<span class="search-condition__header__title__count">( {{ seaerchConditions?.length || 0 }} / 10件 )</span></div>
    <div class="search-condition__header__spacer"></div>
    <button
      mat-button
      type="button"
      *ngIf="seaerchConditions?.length <= 10"
      class="search-condition__header__operation-btn"
      (click)="openSerchConditionDialog()">
      <i class="fa fa-fw fa-plus"></i> 追加
    </button>
  </div>

  <div class="search-condition__content_noconditions"
    *ngIf="!seaerchConditions || seaerchConditions.length < 1">
    <div>追加ボタンでお気に入り検索条件を追加しよう！</div>
  </div>
  <div class="search-condition__content conditions"
    *ngIf="seaerchConditions && seaerchConditions.length > 0">
    <mat-card
      class="conditions__condition condition"
      [class.conditions__condition_checked]="condition.checked"
      *ngFor="let condition of seaerchConditions; let i = index">
      <div
        mat-ripple
        (click)="selectCondition(condition._id)"
        class="condition__title"
        [class.condition__title_checked]="condition.checked">
        {{condition.name ? condition.name : '検索条件' + (i + 1) }}
      </div>
      <mat-card-content>
        <div
          *ngIf="condition.users && condition.users.length > 0"
          class="condition__users">
          <div
            *ngFor="let user of condition.users"
            mat-ripple
            [routerLink]="['/users', user.userId, 'articles']"
            class="user">
            <img
              class="user__icon"
              lazyLoad="/api/images/avator/{{ user._id }}"
              [offset]="this.Constant.LAZY_LOAD_OFFSET"
              >
            <p class="user__userId">{{user.userId}}</p>
          </div>
        </div>
        <div
          *ngIf="condition.dateSearchPattern"
          class="condition__date">
          <i class="fa fa-fw fa-calendar"></i>
          <div class="condition__date__statement">{{dateRangeDisp(condition)}}</div>
        </div>
      </mat-card-content>
      <mat-card-actions>
        <button
          mat-button
          type="button"
          (click)="deleteCondition(condition)"
          ><i class="fa fa-fw fa-trash"></i>  削除</button>
        <button
          mat-button
          class="comment-editor__register-btn"
          type="button"
          (click)="openSerchConditionDialog(condition)"
          ><i class="fa fa-fw fa-cog"></i>  条件変更</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>