title: Angular 6, Can't bind to 'org' since it isn't a known property of 'appCycleDirection' ( Directive)
body: <p>I have the following directive as,</p>
  
  <pre><code>import { Directive, Input, OnInit } from '@angular/core';
  import {GoogleMapsAPIWrapper} from '@agm/core';
  
  declare let google: any;
  @Directive({
    // tslint:disable-next-line:directive-selector
    selector: 'appCycleDirection'
  })
  export class CycleDirectionDirective implements OnInit {
  
    @Input() org;
    @Input() dst;
    @Input() originPlaceId: any;
    @Input() destinationPlaceId: any;
    @Input() waypoints: any;
    @Input() directionsDisplay: any;
    @Input() estimatedTime: any;
    @Input() estimatedDistance: any;
    constructor(private gmapsApi: GoogleMapsAPIWrapper) { }
  
    ngOnInit() {
      console.log(' In directive ');
      console.log(this.org);
      this.gmapsApi.getNativeMap().then(map =&gt; {
        const directionsService = new google.maps.DirectionsService;
        const directionsDisplay = new google.maps.DirectionsRenderer;
        directionsDisplay.setMap(map);
        directionsService.route({
                origin: {lat: this.org.latitude, lng: this.org.longitude},
                destination: {lat: this.dst.latitude, lng: this.dst.longitude},
                waypoints: [],
                optimizeWaypoints: true,
                travelMode: 'TRANSIT'
              }, function(response, status) {
                          if (status === 'OK') {
                            directionsDisplay.setDirections(response);
                            console.log(response);
                          } else {
                            window.alert('Directions request failed due to ' + status);
                          }
        });
  
      });
    }
  }
  </code></pre>
  
  <p>I am using this directive inside other component html as follows,</p>
  
  <pre><code>&lt;agm-map *ngIf="Address !== undefined" [latitude]="lat" [longitude]="lng" [zoom]="zoom"&gt;
      &lt;appCycleDirection *ngIf="dst !== undefined"  [org]="org" [dst]="dst"&gt;&lt;/appCycleDirection&gt;
      &lt;agm-marker  [style.height.px]="map.offsetHeight"  [latitude]="lat" [longitude]="lng"&gt;&lt;/agm-marker&gt;
  &lt;/agm-map&gt;
  </code></pre>
  
  <p>I have added the directive into declarations array and exports array inside the root module app.module.ts.</p>
  
  <p>Even I have imported in the component with above html page.</p>
  
  <p>But When I am running the code, it is throwing me the following error,</p>
  
  <pre><code>&gt; Uncaught (in promise): Error: Template parse errors: Can't bind to
  &gt; 'org' since it isn't a known property of 'appCycleDirection'.
  &gt; ("[latitude]="lat" [longitude]="lng" [zoom]="zoom"&gt;
  &gt;     &lt;appCycleDirection *ngIf="dst !== undefined"  [ERROR -&gt;][org]="org" [dst]="dst"&gt;&lt;/appCycleDirection&gt;
  &gt;     &lt;agm-marker  [style.height.px]="map.offsetHeight"  ["): ng:///LayoutModule/FindCycleComponent.html@9:50 Can't bind to 'dst'
  &gt; since it isn't a known property of 'appCycleDirection'. ("lat"
  &gt; [longitude]="lng" [zoom]="zoom"&gt;
  &gt;     &lt;appCycleDirection *ngIf="dst !== undefined"  [org]="org" [ERROR -&gt;][dst]="dst"&gt;&lt;/appCycleDirection&gt;
  &gt;     &lt;agm-marker  [style.height.px]="map.offsetHeight"  [latitude]="l"): ng:///LayoutModule/FindCycleComponent.html@9:62
  &gt; 'appCycleDirection' is not a known element:
  &gt; 1. If 'appCycleDirection' is an Angular component, then verify that it is part of this module.
  &gt; 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("&gt; &lt;agm-map
  &gt; *ngIf="cycleAddress !== undefined" [latitude]="lat" [longitude]="lng" [zoom]="zoom"&gt;
  &gt;     [ERROR -&gt;]&lt;appCycleDirection *ngIf="dst !== undefined"  [org]="org" [dst]="dst"&gt;&lt;/appCycleDirection&gt;
  &gt;     &lt;agm-m"): ng:///LayoutModule/FindCycleComponent.html@9:4
  </code></pre>
  
  <p>Please correct me where I am going wrong. Tried lot of time to figure it myself but nothing I could find.</p>