<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>my-angular-cli-app documentation</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="icon" type="image/x-icon" href="../images/favicon.ico">
	    <link rel="stylesheet" href="../styles/style.css">
    </head>
    <body>

        <div class="navbar navbar-default navbar-fixed-top visible-xs">
            <a href="../" class="navbar-brand">my-angular-cli-app documentation</a>
            <button type="button" class="btn btn-default btn-menu fa fa-bars" id="btn-menu"></button>
        </div>

        <div class="xs-menu menu" id="mobile-menu">
            <div id="book-search-input" role="search">
                <input type="text" placeholder="Type to search">
            </div>
            <nav>
            
                <ul class="list">
            
                    <li class="title">
                        <a href="../index.html">my-angular-cli-app documentation</a>
                    </li>
            
                    <li class="divider"></li>
            
            
                    <li class="chapter">
                        <a data-type="chapter-link" href="../index.html"><span class="fa fa-home"></span>Getting started</a>
                        <ul class="links">
                                <li class="link">
                                    <a 
                                        
                                         href="../overview.html" 
                                         href="../overview.html" 
                                        >
                                        <span class="fa fa-th"></span>Overview
                                    </a>
                                </li>
                                <li class="link">
                                  <a href="../index.html" ><span class="fa fa-file-text-o"></span>README</a>
                                </li>
                                <li class="link">
                                    <a href="./license.html"
                                        >
                                        <span class="fa fa-file-text-o"></span>LICENSE
                                    </a>
                                </li>
                        </ul>
                    </li>
            
            
                    <li class="chapter">
                        <a data-type="chapter-link" href="../modules.html" >
                            <div class="menu-toggler linked" data-toggle="collapse"
                                    data-target="#xs-modules-links"
                            >
                                <span class="fa fa-archive"></span>
                                <span class="link-name">Modules</span>
                                <span class="fa fa-angle-down"></span>
                            </div>
                        </a>
                        <ul class="links collapse "
                                id="xs-modules-links"
                            >
                                <li class="link">
                                    <a href="../modules/AppModule.html" >AppModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/AppRoutingModule.html" >AppRoutingModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/CoreModule.html" >CoreModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/MyrecipesModule.html" >MyrecipesModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/RecipesModule.html" >RecipesModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/RecipesRoutingModule.html" >RecipesRoutingModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/SharedModule.html" >SharedModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/SharedRoutingModule.html" >SharedRoutingModule</a>
                                </li>
                        </ul>
                    </li>
            
                    <li class="chapter">
                        <div class="simple menu-toggler" data-toggle="collapse"
                                data-target="#xs-components-links"
                            >
                            <span class="fa fa-cogs"></span>
                            <span>Components</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                        <ul class="links collapse "
                                id="xs-components-links"
                            >
                                <li class="link">
                                    <a href="../components/AppComponent.html" >AppComponent</a>
                                </li>
                                <li class="link">
                                    <a href="../components/FooterComponent.html" >FooterComponent</a>
                                </li>
                                <li class="link">
                                    <a href="../components/HeaderComponent.html" >HeaderComponent</a>
                                </li>
                                <li class="link">
                                    <a href="../components/HomeComponent.html" >HomeComponent</a>
                                </li>
                                <li class="link">
                                    <a href="../components/LoginComponent.html" >LoginComponent</a>
                                </li>
                                <li class="link">
                                    <a href="../components/MyrecipesComponent.html" >MyrecipesComponent</a>
                                </li>
                                <li class="link">
                                    <a href="../components/NotfoundComponent.html" >NotfoundComponent</a>
                                </li>
                                <li class="link">
                                    <a href="../components/RecipeComponent.html" >RecipeComponent</a>
                                </li>
                                <li class="link">
                                    <a href="../components/RecipeDetailsComponent.html" >RecipeDetailsComponent</a>
                                </li>
                                <li class="link">
                                    <a href="../components/RecipesFavouritesComponent.html" >RecipesFavouritesComponent</a>
                                </li>
                                <li class="link">
                                    <a href="../components/RecipesFilteredComponent.html" >RecipesFilteredComponent</a>
                                </li>
                                <li class="link">
                                    <a href="../components/RecipesListComponent.html" >RecipesListComponent</a>
                                </li>
                                <li class="link">
                                    <a href="../components/SliderComponent.html" >SliderComponent</a>
                                </li>
                        </ul>
                    </li>
            
                    <li class="chapter">
                        <div class="simple menu-toggler" data-toggle="collapse"
                                data-target="#xs-directives-links"
                            >
                            <span class="fa fa-code"></span>
                            <span>Directives</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                        <ul class="links collapse "
                                id="xs-directives-links"
                            >
                                <li class="link">
                                    <a href="../directives/InputFormatDirective.html" >InputFormatDirective</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/InputStringValidationDirective.html" >InputStringValidationDirective</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/InputYearValidationDirective.html"  data-type="entity-link" class="active" >InputYearValidationDirective</a>
                                </li>
                        </ul>
                    </li>
            
                    <li class="chapter">
                        <div class="simple menu-toggler" data-toggle="collapse"
                                data-target="#xs-classes-links"
                            >
                            <span class="fa fa-file-code-o"></span>
                            <span>Classes</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                        <ul class="links collapse "
                                id="xs-classes-links"
                            >
                                <li class="link">
                                    <a href="../classes/Recipe.html" >Recipe</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/RecipeWithKey.html" >RecipeWithKey</a>
                                </li>
                        </ul>
                    </li>
            
                    <li class="chapter">
                        <div class="simple menu-toggler" data-toggle="collapse"
                                data-target="#xs-injectables-links"
                            >
                            <span class="fa fa-long-arrow-down"></span>
                            <span>Injectables</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                        <ul class="links collapse "
                                id="xs-injectables-links"
                            >
                                <li class="link">
                                    <a href="../injectables/AuthGuard.html" >AuthGuard</a>
                                </li>
                                <li class="link">
                                    <a href="../injectables/AuthService.html" >AuthService</a>
                                </li>
                                <li class="link">
                                    <a href="../injectables/RecipeGuardService.html" >RecipeGuardService</a>
                                </li>
                                <li class="link">
                                    <a href="../injectables/RecipesResolver.html" >RecipesResolver</a>
                                </li>
                                <li class="link">
                                    <a href="../injectables/RecipesService.html" >RecipesService</a>
                                </li>
                        </ul>
                    </li>
            
            
                    <li class="chapter">
                        <div class="simple menu-toggler" data-toggle="collapse"
                                data-target="#xs-pipes-links"
                            >
                            <span class="fa fa-plus"></span>
                            <span>Pipes</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                        <ul class="links collapse "
                                id="xs-pipes-links"
                            >
                                <li class="link">
                                    <a href="../pipes/SummaryPipe.html" >SummaryPipe</a>
                                </li>
                                <li class="link">
                                    <a href="../pipes/WelcomePipe.html" >WelcomePipe</a>
                                </li>
                        </ul>
                    </li>
            
                    <li class="chapter">
                        <div class="simple menu-toggler" data-toggle="collapse"
                                data-target="#xs-miscellaneous-links"
                            >
                            <span class="fa fa-cubes"></span>
                            <span>Miscellaneous</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                        <ul class="links collapse "
                                id="xs-miscellaneous-links"
                            >
                                <li class="link">
                                  <a href="../miscellaneous/functions.html" data-type="entity-link" >Functions</a>
                                </li>
                                <li class="link">
                                  <a href="../miscellaneous/variables.html" data-type="entity-link" >Variables</a>
                                </li>
                        </ul>
                    </li>
            
                    <li class="chapter">
                        <a data-type="chapter-link" href="../routes.html" ><span class="fa fa-code-fork"></span>Routes</a>
                    </li>
            
                    <li class="chapter">
                        <a data-type="chapter-link" href="../coverage.html" ><span class="fa fa-tasks"></span>Documentation coverage</a>
                    </li>
            
                    <li class="divider"></li>
                    <li class="copyright">
                            Documentation generated using <a href="https://compodoc.github.io/website/" target="_blank">
                                        <img src="..//images/compodoc-vectorise.svg" class="img-responsive">
                            </a>
                    </li>
            
                </ul>
            
            </nav>
        </div>

        <div class="container-fluid main">
           <div class="row main">
               <div class="hidden-xs menu">
                   <nav>
                   
                       <ul class="list">
                   
                           <li class="title">
                               <a href="../index.html">my-angular-cli-app documentation</a>
                           </li>
                   
                           <li class="divider"></li>
                   
                               <div id="book-search-input" role="search">
                                   <input type="text" placeholder="Type to search">
                               </div>
                   
                           <li class="chapter">
                               <a data-type="chapter-link" href="../index.html"><span class="fa fa-home"></span>Getting started</a>
                               <ul class="links">
                                       <li class="link">
                                           <a 
                                               
                                                href="../overview.html" 
                                                href="../overview.html" 
                                               >
                                               <span class="fa fa-th"></span>Overview
                                           </a>
                                       </li>
                                       <li class="link">
                                         <a href="../index.html" ><span class="fa fa-file-text-o"></span>README</a>
                                       </li>
                                       <li class="link">
                                           <a href="./license.html"
                                               >
                                               <span class="fa fa-file-text-o"></span>LICENSE
                                           </a>
                                       </li>
                               </ul>
                           </li>
                   
                   
                           <li class="chapter">
                               <a data-type="chapter-link" href="../modules.html" >
                                   <div class="menu-toggler linked" data-toggle="collapse"
                                           data-target="#modules-links"
                                   >
                                       <span class="fa fa-archive"></span>
                                       <span class="link-name">Modules</span>
                                       <span class="fa fa-angle-down"></span>
                                   </div>
                               </a>
                               <ul class="links collapse "
                                       id="modules-links"
                   >
                                       <li class="link">
                                           <a href="../modules/AppModule.html" >AppModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/AppRoutingModule.html" >AppRoutingModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/CoreModule.html" >CoreModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/MyrecipesModule.html" >MyrecipesModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/RecipesModule.html" >RecipesModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/RecipesRoutingModule.html" >RecipesRoutingModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/SharedModule.html" >SharedModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/SharedRoutingModule.html" >SharedRoutingModule</a>
                                       </li>
                               </ul>
                           </li>
                   
                           <li class="chapter">
                               <div class="simple menu-toggler" data-toggle="collapse"
                                       data-target="#components-links"
                   >
                                   <span class="fa fa-cogs"></span>
                                   <span>Components</span>
                                   <span class="fa fa-angle-down"></span>
                               </div>
                               <ul class="links collapse "
                                       id="components-links"
                   >
                                       <li class="link">
                                           <a href="../components/AppComponent.html" >AppComponent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/FooterComponent.html" >FooterComponent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/HeaderComponent.html" >HeaderComponent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/HomeComponent.html" >HomeComponent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/LoginComponent.html" >LoginComponent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/MyrecipesComponent.html" >MyrecipesComponent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/NotfoundComponent.html" >NotfoundComponent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/RecipeComponent.html" >RecipeComponent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/RecipeDetailsComponent.html" >RecipeDetailsComponent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/RecipesFavouritesComponent.html" >RecipesFavouritesComponent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/RecipesFilteredComponent.html" >RecipesFilteredComponent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/RecipesListComponent.html" >RecipesListComponent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/SliderComponent.html" >SliderComponent</a>
                                       </li>
                               </ul>
                           </li>
                   
                           <li class="chapter">
                               <div class="simple menu-toggler" data-toggle="collapse"
                                       data-target="#directives-links"
                   >
                                   <span class="fa fa-code"></span>
                                   <span>Directives</span>
                                   <span class="fa fa-angle-down"></span>
                               </div>
                               <ul class="links collapse "
                                       id="directives-links"
                   >
                                       <li class="link">
                                           <a href="../directives/InputFormatDirective.html" >InputFormatDirective</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/InputStringValidationDirective.html" >InputStringValidationDirective</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/InputYearValidationDirective.html"  data-type="entity-link" class="active" >InputYearValidationDirective</a>
                                       </li>
                               </ul>
                           </li>
                   
                           <li class="chapter">
                               <div class="simple menu-toggler" data-toggle="collapse"
                                       data-target="#classes-links"
                   >
                                   <span class="fa fa-file-code-o"></span>
                                   <span>Classes</span>
                                   <span class="fa fa-angle-down"></span>
                               </div>
                               <ul class="links collapse "
                                       id="classes-links"
                   >
                                       <li class="link">
                                           <a href="../classes/Recipe.html" >Recipe</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/RecipeWithKey.html" >RecipeWithKey</a>
                                       </li>
                               </ul>
                           </li>
                   
                           <li class="chapter">
                               <div class="simple menu-toggler" data-toggle="collapse"
                                       data-target="#injectables-links"
                   >
                                   <span class="fa fa-long-arrow-down"></span>
                                   <span>Injectables</span>
                                   <span class="fa fa-angle-down"></span>
                               </div>
                               <ul class="links collapse "
                                       id="injectables-links"
                   >
                                       <li class="link">
                                           <a href="../injectables/AuthGuard.html" >AuthGuard</a>
                                       </li>
                                       <li class="link">
                                           <a href="../injectables/AuthService.html" >AuthService</a>
                                       </li>
                                       <li class="link">
                                           <a href="../injectables/RecipeGuardService.html" >RecipeGuardService</a>
                                       </li>
                                       <li class="link">
                                           <a href="../injectables/RecipesResolver.html" >RecipesResolver</a>
                                       </li>
                                       <li class="link">
                                           <a href="../injectables/RecipesService.html" >RecipesService</a>
                                       </li>
                               </ul>
                           </li>
                   
                   
                           <li class="chapter">
                               <div class="simple menu-toggler" data-toggle="collapse"
                                       data-target="#pipes-links"
                   >
                                   <span class="fa fa-plus"></span>
                                   <span>Pipes</span>
                                   <span class="fa fa-angle-down"></span>
                               </div>
                               <ul class="links collapse "
                                       id="pipes-links"
                   >
                                       <li class="link">
                                           <a href="../pipes/SummaryPipe.html" >SummaryPipe</a>
                                       </li>
                                       <li class="link">
                                           <a href="../pipes/WelcomePipe.html" >WelcomePipe</a>
                                       </li>
                               </ul>
                           </li>
                   
                           <li class="chapter">
                               <div class="simple menu-toggler" data-toggle="collapse"
                                       data-target="#miscellaneous-links"
                   >
                                   <span class="fa fa-cubes"></span>
                                   <span>Miscellaneous</span>
                                   <span class="fa fa-angle-down"></span>
                               </div>
                               <ul class="links collapse "
                                       id="miscellaneous-links"
                   >
                                       <li class="link">
                                         <a href="../miscellaneous/functions.html" data-type="entity-link" >Functions</a>
                                       </li>
                                       <li class="link">
                                         <a href="../miscellaneous/variables.html" data-type="entity-link" >Variables</a>
                                       </li>
                               </ul>
                           </li>
                   
                           <li class="chapter">
                               <a data-type="chapter-link" href="../routes.html" ><span class="fa fa-code-fork"></span>Routes</a>
                           </li>
                   
                           <li class="chapter">
                               <a data-type="chapter-link" href="../coverage.html" ><span class="fa fa-tasks"></span>Documentation coverage</a>
                           </li>
                   
                           <li class="divider"></li>
                           <li class="copyright">
                                   Documentation generated using <a href="https://compodoc.github.io/website/" target="_blank">
                                               <img src="..//images/compodoc-vectorise.svg" class="img-responsive">
                                   </a>
                           </li>
                   
                       </ul>
                   
                   </nav>
               </div>
               <div class="content directive">
                   <div class="content-data">





<ol class="breadcrumb">
  <li>Directives</li>
  <li>InputYearValidationDirective</li>
</ol>

<ul class="nav nav-tabs" role="tablist">
    <li class="active">
        <a href="#info" id="info-tab" role="tab" data-toggle="tab" data-link="info">Info</a>
    </li>


    <li>
        <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
    </li>

</ul>

<div class="tab-content">
    <div class="tab-pane fade active in" id="info">
        <p class="comment">
            <h3>File</h3>
        </p>
        <p class="comment">
            <code>src/app/directives/input-year-validation.directive.ts</code>
        </p>




        <section>
            <h3>Metadata</h3>
            <table class="table table-sm table-hover">
                <tbody>

                    <tr>
                        <td class="col-md-3">selector</td>
                        <td class="col-md-9"><code>[appInputYearValidation]</code></td>
                    </tr>

                </tbody>
            </table>
        </section>

            <section>
                <h3 id="index">Index</h3>
                <table class="table table-sm table-bordered index-table">
                    <tbody>
                        <tr>
                            <td class="col-md-4">
                                <h6><b>HostListeners</b></h6>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-4">
                                <ul class="index-list">
                                    <li>
                                        <a href="#change">change</a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>

            <section>
                <h3 id="constructor">Constructor</h3>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-4">
                                    <code>constructor(domElement: <a href="https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html" target="_blank">ElementRef</a>)</code>
                                </td>
                            </tr>
                                    <tr>
                                        <td class="col-md-4">
                                            <div class="io-line">Defined in <a href="" data-line="6" class="link-to-prism">src/app/directives/input-year-validation.directive.ts:6</a></div>
                                        </td>
                                    </tr>
            
                            <tr>
                                <td class="col-md-4">
                                        <div>
                                                <b>Parameters :</b>
                                                <table class="params">
                                                    <thead>
                                                        <tr>
                                                            <td>Name</td>
                                                            <td>Type</td>
                                                            <td>Optional</td>
                                                            <td>Description</td>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                            <tr>
                                                              <td>domElement</td>
                                                              <td>
                                                                        <code><a href="https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html" target="_blank" >ElementRef</a></code>
                                                              </td>
                                                              <td>
                                                              </td>
                                                              <td></td>
                                                            </tr>
                                                    </tbody>
                                                </table>
                                        </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
            </section>




            <section>
                <h3>HostListeners</h3>        <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-4">
                                    <a name="change"></a>
                                    <span class="name"><b> change</b><a href="#change"><span class="fa fa-link"></span></a></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-4">
            <code>change()</code>
                                </td>
                            </tr>
            
            
                                    <tr>
                                        <td class="col-md-4">
                                            <div class="io-line">Defined in <a href="" data-line="10" class="link-to-prism">src/app/directives/input-year-validation.directive.ts:10</a></div>
                                        </td>
                                    </tr>
            
                        </tbody>
                    </table>
            </section>



    </div>


    <div class="tab-pane fade tab-source-code" id="source">
        <pre class="line-numbers"><code class="language-typescript">import { Directive, ElementRef, HostListener } from &#x27;@angular/core&#x27;;

@Directive({
  selector: &#x27;[appInputYearValidation]&#x27;
})
export class InputYearValidationDirective {

  constructor(private domElement: ElementRef) { }

  @HostListener(&#x27;change&#x27;) onChange() {
    const value &#x3D; +this.domElement.nativeElement.value;
    if (!value) {
      this.domElement.nativeElement.value &#x3D; &#x27;&#x27;;
      return;
    }

    if (value &lt; 1900) {
      this.domElement.nativeElement.value &#x3D; &#x27;1900&#x27;;
    }

    if (value &gt; 2017) {
      this.domElement.nativeElement.value &#x3D; &#x27;2017&#x27;;
    }
  }

}
</code></pre>
    </div>

</div>








                   </div><div class="search-results">
    <div class="has-results">
        <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
        <ul class="search-results-list"></ul>
    </div>
    <div class="no-results">
        <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
    </div>
</div>
</div>
           </div>
       </div>

       <script src="../js/libs/bootstrap-native.js"></script>

       <script src="../js/libs/es6-shim.min.js"></script>
       <script src="../js/libs/EventDispatcher.js"></script>
       <script src="../js/libs/promise.min.js"></script>
       <script src="../js/libs/zepto.min.js"></script>

       <script src="../js/compodoc.js"></script>

       <script>var COMPODOC_CURRENT_PAGE_DEPTH = 1;</script>

       <script src="../js/search/search.js"></script>
       <script src="../js/search/lunr.min.js"></script>
       <script src="../js/search/search-lunr.js"></script>

       <script src="../js/tabs.js"></script>
       <script src="../js/menu.js"></script>
       <script src="../js/libs/prism.js"></script>
       <script src="../js/sourceCode.js"></script>
       <script src="../js/search/search_index.js"></script>

    </body>
</html>
