Merge branch 'master' into fix-readme

Author: ashwin-sureshkumar

src/app/operators/components/operator-extras/operator-extras.component.scss

@@ -1,13 +1,17 @@
+.extra-tip {
+    display: flex;
+}
+
 h3 {
-  display: inline-block;
-  vertical-align: middle;
-  padding-left: 10px;
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 10px;
 }
 
 .tip-warning {
-  color: rgb(244, 67, 54);
+    color: rgb(244, 67, 54);
 }
 
 .tip-info {
-  color: rgb(33, 150, 243);
+    color: rgb(33, 150, 243);
 }

src/app/operators/components/operator/operator.component.html

@@ -21,12 +21,18 @@ <h3 class="short-description" [innerHTML]="shortDescription"></h3>
     [operatorExamples]="examples" class="margin-bottom-16">
   </app-operator-examples>
   <app-operator-parameters
-    [operatorParameters]="parameters">
+    [operatorParameters]="parameters"
+    *ngIf="parameters?.length">
   </app-operator-parameters>
   <app-operator-walkthrough
     class="margin-bottom-16"
     [operatorWalkthrough]="walkthrough" >
   </app-operator-walkthrough>
+  <app-operator-extras
+    class="margin-bottom-16"
+    *ngIf="walkthroughExtras"
+    [operatorExtras]="walkthroughExtras">
+  </app-operator-extras>
   <app-related-operators
     [relatedOperators]="relatedOperators">
   </app-related-operators>

src/app/operators/components/operator/operator.component.ts

@@ -1,24 +1,29 @@
-import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { OperatorDoc } from '../../../../operator-docs/operator.model';
+import {
+  Component,
+  Input,
+  OnInit,
+  ChangeDetectionStrategy
+} from "@angular/core";
+import { OperatorDoc } from "../../../../operator-docs/operator.model";
 
 @Component({
-  selector: 'app-operator',
-  templateUrl: './operator.component.html',
-  styleUrls: ['./operator.component.scss'],
+  selector: "app-operator",
+  templateUrl: "./operator.component.html",
+  styleUrls: ["./operator.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class OperatorComponent {
   @Input() operator: OperatorDoc;
 
-  private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/';
-  private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
+  private readonly baseSourceUrl = "https://github.com/ReactiveX/rxjs/blob/master/src/operators/";
+  private readonly baseSpecUrl = "http://reactivex.io/rxjs/test-file/spec-js/operators";
 
   get operatorName() {
     return this.operator.name;
   }
 
   get signature() {
-    return this.operator.signature || 'Signature Placeholder';
+    return this.operator.signature || "Signature Placeholder";
   }
 
   get marbleUrl() {
@@ -30,17 +35,26 @@ export class OperatorComponent {
   }
 
   get shortDescription() {
-    return this.operator.shortDescription && this.operator.shortDescription.description;
+    return (
+      this.operator.shortDescription &&
+      this.operator.shortDescription.description
+    );
   }
 
   get shortDescriptionExtras() {
-    return this.operator.shortDescription && this.operator.shortDescription.extras;
+    return (
+      this.operator.shortDescription && this.operator.shortDescription.extras
+    );
   }
 
   get walkthrough() {
     return this.operator.walkthrough && this.operator.walkthrough.description;
   }
 
+  get walkthroughExtras() {
+    return this.operator.walkthrough && this.operator.walkthrough.extras;
+  }
+
   get parameters() {
     return this.operator.parameters || [];
   }