¿Cómo establecer valores predeterminados para las propiedades del componente Angular 2?

En Angular 2, podemos pasar el valor de una variable entre dos componentes (de padre a hijo) usando el decorador de entrada. Usando estos decoradores de entrada también podemos establecer los valores predeterminados de las propiedades. A continuación, elaboré detalladamente de manera integral cómo establecer valores predeterminados para el componente Angular 2.

Sintaxis:

@Input() PropertyName = Default Value  /* @Input country = 'India' */

Acercarse:

• Primero codifique el archivo .html con respecto a los requisitos.
• Luego incluya la propiedad predeterminada en el componente secundario.
• Ahora inicialice la propiedad con un valor predeterminado usando el decorador @Input().
• También deberíamos importar el decorador de entrada desde ‘@angular/core’.
• Una vez completada la inicialización, use la propiedad en el archivo HTML para mostrar en el navegador.

Sintaxis para importar:

import { Input } from '@angular/core';

Implementación por código:
app.component.html:

<p>Welcome to GeeksforGeeks </p>
<app-child [country] = "countryName"></app-child>

aplicación.componente.ts:
 

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor() { }
  ngOnInit() {}
  countryName = 'India';
}

child.component.ts:

import { Component, Input, OnInit} from '@angular/core';
  
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  constructor() { }
  ngOnInit() {}
    
  @Input() country = 'Australia';
  @Input() capital = 'New Delhi';
  
}

niño.componente.html:

<p> Country is : {{country}} </p>
<p> Capital is : {{capital}} </p>

Conclusión:
Como estamos pasando propiedad de campo como ‘India’, se mostrará. Pero cuando se trata de capital, ya que no estamos pasando ningún valor, muestra el valor predeterminado en el archivo child.component.ts.

Producción: