Using Objects with Angular @Input Properties

Image by 0fjd125gk87 from Pixabay

Scenario

export type Language = 'javascript' | 'typescript' | 'elixir';export class Config {
name: string = 'RxJS';
responsive: boolean = true;
language: Language = 'typescript';
}
[config]="{ name: 'Firefly Semantics Slice',
language: 'typescript',
responsive: true }"

Approach

<hello [config]="{ name: name, language: 'typescript', responsive: false }">
</hello>
Property 'name' is missing in type '{ language: "typescript"; responsive: true; }' but required in type 'Config'
_config: Config = new Config();@Input()
set config(c: Partial<Config>) {
this._config = Object.assign(this._config, c);
}
get config() {
return this._config;
}

Demo

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation