CODEWITHSUNDEEP
angulartypescript
Vivien Adnot
Vivien Adnot

Reputation: 1257

How to declare an interface above an angular component?

I have a component with a method that receives values from a form. I would like to describe the form data with an interface.

However, at runtime (ng serve), the compiler tells me that the interface is unknown. (Public property 'friendshipFormModel' of exported class has or is using private name 'IFriendshipFormModel'.)

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.

The file:

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<FriendshipModel>();
    friendshipFormModel: IFriendshipFormModel;

    constructor() {
        this.friendshipFormModel = {
            name: '',
            meetingDate: null
        };
    }

    createFriendship() {
        const friendshipCreation: FriendshipModel = this.frienshipFactory(this.friendshipFormModel);
        this.friendshipCreated.emit(friendshipCreation);
    }
}

Thank you !

Upvotes: 8

Views: 37833

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

In this case, just export interfaces as well

export interface IDatePickerDateModel {
    day: string;
    month: string;
    year: string;
    formatted: string;
    momentObj: moment.Moment;
}

export interface IFriendshipFormModel {
    name: string;
    meetingDate?: IDatePickerDateModel;
}

Upvotes: 8

Related Questions