nycJSorg/angular-presentation

<slide-deck slideShortcuts slidesRouting slides-tracking>
  <codelab-progress-bar></codelab-progress-bar>
  <slide-arrows></slide-arrows>

  <!--  INTRO -->
  <div *slide id="intro" no-padding>
    <codelab-title-slide
      title="Custom Events"
      description="Learn to bind to custom events using @Output()"
      prereqs="Component-Tree"
    ></codelab-title-slide>
  </div>

  <!--  Slide 1-->
  <div *slide id="custom-event-slide-1" milestone="CustomEvents">
    <h1>Custom Events / Intro</h1>
    <h1>
      In this milestone, you will learn to use @Output() to communicate from
      child to parent component and handle custom events.
    </h1>
  </div>

  <!--  Slide 2 -->
  <div *slide id="custom-event-slide-2" milestone="CustomEvents">
    <h1>Custom Events / Passing data from child to parent</h1>

    <div row>
      <div column-5>
        <code-demo-file-path path="parent.ts"></code-demo-file-path>
        <code-demo-editor
          [fontSize]="15"
          [(ngModel)]="code.exercise1a.code"
          [codeDemoHighlight]="code.exercise1a.match"
        ></code-demo-editor>
        <h1>
          To 'listen' to a child's event, we bind to the child's event
          childDidSomething.
        </h1>
      </div>
      <div column-5>
        <code-demo-file-path path="child.ts"></code-demo-file-path>
        <code-demo-editor
          [fontSize]="15"
          [(ngModel)]="code.exercise1b.code"
          [codeDemoHighlight]="code.exercise1a.match"
        ></code-demo-editor>
        <h1>
          To let the parent know that there is an event. We emit an event from
          the child.
        </h1>
      </div>
    </div>
  </div>

  <!--  Slide 3 -->
  <div *slide id="custom-event-slide-3" milestone="CustomEvents">
    <h1>Custom Events / Exercise - Intro</h1>
    <h1>
      Let's implement a ThumbsUp and ThumbsDown button for the VideoComponent
      you worked on before.
    </h1>

    <codelab-exercise-preview
      column-5
      [exercise]="exercises[0]"
    ></codelab-exercise-preview>
  </div>

  <!--  Slide 4 -->
  <div *slide id="custom-event-slide-4" no-padding>
    <codelab-exercise
      milestone="CustomEvents"
      [translations]="t"
      [exercise]="exercises[0]"
    >
    </codelab-exercise>
  </div>
</slide-deck>