<ng-container *ngIf="guideCategory">
  <app-header [title]="guideCategory.name"
              [imageUrl]="apiService.getAssetUrl('page-elements/483_Pacific_28Sep10_1680x220_BW.jpg')"></app-header>

  <div fxLayout="column" fxLayoutGap="2em" style="margin: 2em;max-width: 1000px;">
    <md-card class="description">
      <app-markdown [data]="guideCategory.description"></app-markdown>
    </md-card>

    <md-card *ngIf="guideCategory.contentItems && guideCategory.contentItems.length">
      <h2>Content items</h2>
      <md-nav-list>
        <md-list-item *ngFor="let item of guideCategory.contentItems" [routerLink]="item.getDefaultRouterLink()">
          <img md-list-avatar [src]="apiService.getAssetUrl(item.image)">
          <h3 md-line> {{item.getTitle()}} </h3>
        </md-list-item>
      </md-nav-list>
    </md-card>

    <md-card>
      <app-markdown [data]="guideCategory.additionalInfo"></app-markdown>
    </md-card>
  </div>
</ng-container>

<ng-container *ngIf="guideCategory">
  <app-header [title]="guideCategory.name"
              [imageUrl]="apiService.getAssetUrl('page-elements/483_Pacific_28Sep10_1680x220_BW.jpg')"></app-header>

  <div fxLayout="column" fxLayoutGap="2em" style="margin: 2em;max-width: 1000px;">
    <md-card class="description">
      <app-markdown [data]="guideCategory.description"></app-markdown>
    </md-card>

    <md-card *ngIf="guideCategory.contentItems && guideCategory.contentItems.length">
      <h2>Content items</h2>
      <md-nav-list>
        <md-list-item *ngFor="let item of guideCategory.contentItems" [routerLink]="item.getDefaultRouterLink()">
          <img md-list-avatar [src]="apiService.getAssetUrl(item.image)">
          <h3 md-line> {{item.getTitle()}} </h3>
        </md-list-item>
      </md-nav-list>
    </md-card>

    <md-card *ngIf="guideCategory.additionalInfo">
      <app-markdown [data]="guideCategory.additionalInfo"></app-markdown>
    </md-card>
  </div>
</ng-container>

Hide additional info if not set
Hide additional info if not set
