¿Cómo pasar datos del componente Padre a Hijo en Angular?

Podemos usar la directiva @Input para pasar los datos del componente Padre a Hijo en Angular

Uso del enlace de entrada: @Input: podemos usar esta directiva dentro del componente secundario para acceder a los datos enviados por el componente principal. Aquí app.component es el componente principal y cdetail.component es el componente secundario.

Componente principal

app.component.ts Hay dos arrays. Uno para list_prog – lista de idiomas, prog_details – detalles de idiomas.

import { Component } from '@angular/core';
import { AbstractControl, FormBuilder, 
        FormGroup } from '@angular/forms';
  
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
  
    list_prog = ['JAVA', 'C++', 'C', 
            'PYTHON', 'JAVASCRIPT'];
  
    prog_details = [`Java is a widely used 
    platform independent language. Java was 
    developed by James Gosling.`, `C++ is 
    multi-paradigm and procedural oriented 
    language. Developed by Bjarne Stroustrup.`, 
    `C is a procedural language and 
    developed by Dennis Ritchie`, `Python is 
    a interpreted high level language 
    developed by Guido van Rossum`, 
    `Javascript is a language that conforms 
    the ECMAScript and developed by ECMAScript`];
    options: number;
    curr_info: string;
    prog_title: string;
  
    constructor() {}
  
    onClick(lang) {
        switch (lang) {
            case 'JAVA':
                this.options = 0;
                this.curr_info = 
                    this.prog_details[this.options];
  
                this.prog_title = 
                    this.list_prog[this.options];
                break;
            case 'C++':
                this.options = 1;
                this.curr_info = 
                    this.prog_details[this.options];
  
                this.prog_title = 
                    this.list_prog[this.options];
                break;
            case 'C':
                this.options = 2;
                this.curr_info = 
                    this.prog_details[this.options];
  
                this.prog_title = 
                    this.list_prog[this.options];
                break;
            case 'PYTHON':
                this.options = 3;
                this.curr_info = 
                    this.prog_details[this.options];
  
                this.prog_title = 
                    this.list_prog[this.options];
                break;
            case 'JAVASCRIPT':
                this.options = 4;
                this.curr_info = 
                    this.prog_details[this.options];
  
                this.prog_title = 
                    this.list_prog[this.options];
                break;
            default:
                break;
        }
    }
}

app.component.html Aquí hemos agregado nuestro componente secundario dentro del componente principal y pasamos dos datos, uno es prog_title y otro es curr_info. Pero asegúrese de haber declarado los detalles de la variable y el título dentro del componente secundario.

<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <h4 class="makeCenter">
                List of Programming Languages
            </h4>
            <ul class="uList">
                <li *ngFor="let lang of list_prog"
                [ngClass]=
            "{'active': list_prog[options]===lang}" 
            (click)="onClick(lang)" class="lLang">
                    {{lang}}
                </li>
            </ul>
        </div>
    </div>
</div>
<br><br><br>
<app-cdetail [title]="prog_title" 
    [details]="curr_info">
</app-cdetail>

Componente hijo

cdetail.component.ts Aquí hemos usado la directiva @Input() dentro del componente secundario. Ahora, en el componente secundario, se pueden usar los datos pasados ​​por el componente principal.

import { Component, Input, OnInit } from '@angular/core';
  
@Component({
  selector: 'app-cdetail',
  templateUrl: './cdetail.component.html',
  styleUrls: ['./cdetail.component.css']
})
export class CdetailComponent implements OnInit {
  
  @Input() details: string;
  @Input() title: string;
  
  constructor() { }
  
  ngOnInit(): void {
  }
  
}

cdetail.component.html

<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <h3 class="makeCenter">{{title}}</h3>
            <p style="text-align: justify; 
                text-justify: inter-word;">
                {{details}}
            </p>
        </div>
    </div>
</div>

Producción