title: How to declare an interface above an angular component?
body: <p>I have a component with a method that receives values from a form.
  I would like to describe the form data with an interface.</p>
  
  <p>However, at runtime (ng serve), the compiler tells me that the interface is unknown. (<code>Public property 'friendshipFormModel' of exported class has or is using private name 'IFriendshipFormModel'.</code>)</p>
  
  <p>How can I declare the interfaces properly ? If possible, I would avoid to create a separate file only for this interface, as it belongs to the component.</p>
  
  <p>The file:</p>
  
  <pre><code>import { Component, OnInit, Output, EventEmitter } from '@angular/core';
  import * as moment from 'moment';
  import { FriendshipModel } from '../models/friendship.model';
  
  interface IDatePickerDateModel {
      day: string;
      month: string;
      year: string;
      formatted: string;
      momentObj: moment.Moment;
  }
  
  interface IFriendshipFormModel {
      name: string;
      meetingDate?: IDatePickerDateModel;
  }
  
  @Component({
      selector: 'app-create-friendship',
      templateUrl: './create-friendship.component.html',
      styleUrls: ['./create-friendship.component.css']
  })
  
  export class CreateFriendshipComponent {
      @Output() friendshipCreated = new EventEmitter&lt;FriendshipModel&gt;();
      friendshipFormModel: IFriendshipFormModel;
  
      constructor() {
          this.friendshipFormModel = {
              name: '',
              meetingDate: null
          };
      }
  
      createFriendship() {
          const friendshipCreation: FriendshipModel = this.frienshipFactory(this.friendshipFormModel);
          this.friendshipCreated.emit(friendshipCreation);
      }
  }
  </code></pre>
  
  <p>Thank you !</p>