How to set default parameter for @Input in Angular2?

Question

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]' }}.

Качалов Тимофей · Accepted Answer · 2016-03-07T08:49:01.107

55

try

@Input() name: string = 'noname';

edited Mar 07 '16 at 08:49

answered Mar 07 '16 at 08:23

Качалов Тимофей

1,305
15
22

7

This doesn't work for me. It used the default value EVEN IF I set it to another value in the template. – gyozo kudor Oct 23 '17 at 10:36

score 3 · Answer 2 · answered Aug 01 '19 at 15:04

3

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".

answered Aug 01 '19 at 15:04

michabbb

880
2
7
27

Removing the type annotation makes it work. But why? Shouldn't it not matter? – Rei Miyasaka Apr 02 '21 at 03:45
It doesn't matter. that's a linting suggestion that's only there to standardize your code and make it more readable. you can disable the rule in tslint if you prefer to keep the type annotation. – Eduardo macedo Jun 21 '21 at 20:14

score 2 · Answer 3 · edited Dec 01 '17 at 04:04

2

In the component you should initialize like:

@Input () name:String='';

In the HTML you can use:

{{ name ===''?  'empty string': name }}

edited Dec 01 '17 at 04:04

Leopold Joy

4,524
4
28
37

answered Dec 01 '17 at 03:47

user9037059

21
1

score 2 · Answer 4 · answered Dec 01 '17 at 04:11

2

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.

answered Dec 01 '17 at 04:11

dee zg

13,793
10
42
82

score 0 · Answer 5 · edited Dec 01 '17 at 06:50

0

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.

edited Dec 01 '17 at 06:50

Sujit Kumar Singh

988
9
24

answered Nov 30 '17 at 14:29

Farasi78

981
10
18

score 0 · Answer 6 · answered Feb 13 '20 at 13:37

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

How to set default parameter for @Input in Angular2?

6 Answers6

Linked