Say I have a component that will display a name property, so it roughly goes like this:
import {Component, Input} from 'angular2/core';
@Component({
selector: 'demo',
template: `<div>{{name}}</div>`,
styles: [``],
})
export class Demo {
@Input() name: string;
}The problem is, how could I display [noname] when someone using this component but not passing any name property?
The only solution comes to mind is using logic operator inside template like {{ name || '[noname]' }}.
try
@Input() name: string = 'noname';
with angular 8 and the default tslint settings your IDE will notice:
so it´s okay to just write:
@Input() addclass = '';
without any "type annotation".
In the component you should initialize like:
@Input () name:String='';
In the HTML you can use:
{{ name ===''? 'empty string': name }}
You can intercept @Input() with a setter and have it backed by a private field. In setter, you do a nullcheck so field gets set only to a non-null value. As last, you bind your template to a private fied in which you have set initial value.
I think you can use your idea of using the template. So it would be:
In Component:
@Input () name:String;
In Template:
<div>{{ name != '' ? name : '[no name]' }}</div>
That would check to see if the name is empty, and use '[no name]' or insert the name if the name is passed.
Here is the proper solution to this. (ANGULAR 2 to 9)
Addressing solution: To set a default value for @Input variable. If no value passed to that input variable then It will take the default value.
Example:
I have an object interface named bike:
export interface bike {
isBike?: boolean;
wheels?: number;
engine?: string;
engineType?: string;
}
You made a component named app-bike where you need to pass the properties of bike with @input decorator of angular. But you want that isBike and Wheels properties must have a default value (ie.. isBike: true, wheels: 2)
export class BikeComponent implements OnInit {
private _defaultBike: bike = {
// default isBike is true
isBike: true,
// default wheels will be 2
wheels: 2
};
@Input() newBike: bike = {};
constructor() {}
ngOnInit(): void {
// this will concate both the objects and the object declared later (ie.. ...this.newBike )
// will overwrite the default value. ONLY AND ONLY IF DEFAULT VALUE IS PRESENT
this.newBike = { ...this._defaultBike, ...this.newBike };
// console.log(this.newBike);
}
}
For more detailed article refer to this.
Refer Destructuring assignment from here
