I created a HeaderComponent that requires an object with the structure of
{title: string, short_desc: string}@Component({
selector: 'header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
@Input() data: { title: string, short_desc: string };
constructor() { }
ngOnInit() { }
}
To pass the necessary data to HeaderComponent, I have defined it in my component like this:
@Component({
templateUrl: './my-custom.component.html',
styleUrls: ['./my-custom.component.scss']
})
export class MyCustomComponent implements OnInit {
public headerData: {title: string, short_desc: string};
constructor() {
this.headerData = {
title: 'Settings Page',
short_desc: 'Update your settings',
}
}
ngOnInit() { }
}
Since I need to use HeaderComponent in multiple components, I decided to create a separate file named header-data.ts which contains the following interface:
export interface HeaderData {
title: string;
short_desc: string;
}
However, constantly importing the HeaderData interface in every component where HeaderComponent is used can lead to messy code and potential errors during application restructuring.
My query is: Is there a more efficient way to utilize the HeaderData interface without resorting to cumbersome nested imports or inline object type declarations?