<commit_before>include ../_util-fns

- var top="vertical-align:top"

:marked
  # Component Lifecycle
  A Component has a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children,
  checks it when its data-bound properties change, and destroys it before removing it from the DOM.

  Angular offers **component lifecycle hooks**
  that give us visibility into these key moments and the ability to act when they occur.

  We cover these hooks in this chapter and demonstrate how they work in code.
  
  * [The lifecycle hooks](#hooks-overview)
  * [The hook-call sequence](#hook-sequence)
  * [Other Angular lifecycle hooks](#other-lifecycles)
  * [The lifecycle sample](#the-sample)
    * [All](#peek-a-boo)
    * [Spying OnInit and OnDestroy](#spy) 
    * [OnChanges](#onchanges)
    * [DoCheck](#docheck)
    * [AfterViewInit and AfterViewChecked](#afterview)
    * [AfterContentInit and AfterContentChecked](#aftercontent)
  
  Try the [Live Example](/resources/live-examples/lifecycle-hooks/ts/plnkr.html)

  <!--
    https://github.com/angular/angular/blob/master/modules/angular2/src/core/linker/interfaces.ts
  -->

a(id="hooks-overview")
.l-main-section
:marked
  ## Component lifecycle Hooks
  Directive and component instances have a lifecycle
  as Angular creates, updates, and destroys them.

  Developers can tap into key moments in that lifecycle by implementing
  one or more of the *Lifecycle Hook* interfaces in the `angular2/core` library.
  
  Each interface has a single hook method whose name is the interface name prefixed with `ng`.
  For example, the `OnInit` interface has a hook method named `ngOnInit`.
  We might implement it in a component class like this:
+makeExample('lifecycle-hooks/ts/app/peek-a-boo.component.ts', 'ngOnInit', 'peek-a-boo.component.ts (excerpt)')(format='.')
:marked
  No directive or component will implement all of them and some of the hooks only make sense for components.

  Angular only calls a directive/component hook method *if it is defined*.

.l-sub-section
  :marked
    ### Interface optional?
    The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
    The JavaScript language doesn't have interfaces. 
    Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.

    Fortunately, they aren't necessary.
    We don't have to add the lifecycle hook interfaces to our directives and components to benefit from the hooks themselves.

    Angular instead inspects our directive and component classes and calls the hook methods *if they are defined*.
    Angular will find and call methods like `ngOnInit()`, with or without the interfaces.
    
    Nonetheless, we strongly recommend adding interfaces to TypeScript directive classes
    in order to benefit from strong typing and editor tooling.  
  
  Here are the component lifecycle hook methods:

  ### Directives and Components

table(width="100%")
  col(width="20%")
  col(width="80%") 
  tr
    th Hook
    th Purpose
  tr(style=top)
    td ngOnInit
    td
      :marked
        Initialize the directive/component after Angular initializes the data-bound input properties.
  tr(style=top)
    td ngOnChanges
    td
      :marked
        Respond after Angular sets a data-bound input property. 
        The method receives a `changes` object of current and previous values.
  tr(style=top)
    td ngDoCheck
    td
      :marked<commit_msg>docs(lifecycle-hooks): Fixed missing ":marked" typo closes #1051<commit_after>include ../_util-fns

- var top="vertical-align:top"

:marked
  # Component Lifecycle
  A Component has a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children,
  checks it when its data-bound properties change, and destroys it before removing it from the DOM.

  Angular offers **component lifecycle hooks**
  that give us visibility into these key moments and the ability to act when they occur.

  We cover these hooks in this chapter and demonstrate how they work in code.
  
  * [The lifecycle hooks](#hooks-overview)
  * [The hook-call sequence](#hook-sequence)
  * [Other Angular lifecycle hooks](#other-lifecycles)
  * [The lifecycle sample](#the-sample)
    * [All](#peek-a-boo)
    * [Spying OnInit and OnDestroy](#spy) 
    * [OnChanges](#onchanges)
    * [DoCheck](#docheck)
    * [AfterViewInit and AfterViewChecked](#afterview)
    * [AfterContentInit and AfterContentChecked](#aftercontent)
  
  Try the [Live Example](/resources/live-examples/lifecycle-hooks/ts/plnkr.html)

  <!--
    https://github.com/angular/angular/blob/master/modules/angular2/src/core/linker/interfaces.ts
  -->

a(id="hooks-overview")
.l-main-section
:marked
  ## Component lifecycle Hooks
  Directive and component instances have a lifecycle
  as Angular creates, updates, and destroys them.

  Developers can tap into key moments in that lifecycle by implementing
  one or more of the *Lifecycle Hook* interfaces in the `angular2/core` library.
  
  Each interface has a single hook method whose name is the interface name prefixed with `ng`.
  For example, the `OnInit` interface has a hook method named `ngOnInit`.
  We might implement it in a component class like this:
+makeExample('lifecycle-hooks/ts/app/peek-a-boo.component.ts', 'ngOnInit', 'peek-a-boo.component.ts (excerpt)')(format='.')
:marked
  No directive or component will implement all of them and some of the hooks only make sense for components.

  Angular only calls a directive/component hook method *if it is defined*.

.l-sub-section
  :marked
    ### Interface optional?
    The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
    The JavaScript language doesn't have interfaces. 
    Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.

    Fortunately, they aren't necessary.
    We don't have to add the lifecycle hook interfaces to our directives and components to benefit from the hooks themselves.

    Angular instead inspects our directive and component classes and calls the hook methods *if they are defined*.
    Angular will find and call methods like `ngOnInit()`, with or without the interfaces.
    
    Nonetheless, we strongly recommend adding interfaces to TypeScript directive classes
    in order to benefit from strong typing and editor tooling.  
  
:marked
  Here are the component lifecycle hook methods:

  ### Directives and Components

table(width="100%")
  col(width="20%")
  col(width="80%") 
  tr
    th Hook
    th Purpose
  tr(style=top)
    td ngOnInit
    td
      :marked
        Initialize the directive/component after Angular initializes the data-bound input properties.
  tr(style=top)
    td ngOnChanges
    td
      :marked
        Respond after Angular sets a data-bound input property. 
        The method receives a `changes` object of current and previous values.
  tr(style=top)
    td ngDoCheck
    td
      :marked
{'fraction_non_alphanumeric': 0.07714083510261854, 'fraction_numerical': 0.003113941967445152, 'mean_word_length': 3.739101274312542, 'pattern_counts': {'":': 1, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1453669', 'n_tokens_mistral': 2023, 'n_tokens_neox': 1887, 'n_words': 800}