استدعاء مكون الابن داخل المكون الأب parent child في angular

في بعض الأحيان قد نحتاج الى  استدعاء مجموعة من المكونات في صفحة واحدة  خصوصا اذا قسمنا المشروع الى عدة مكونات ولنقل مثلا header.component footer.component  sidebar.component ....  قد نحتاج الى جميع هذه المكونات في مكون أساسي واحد وليكن مثلا بداخل app.component 

بالتالي سنحتاج الى استدعاء المكونات بملف ال view الخاص بالاب

لنضع مثال يوضح ذلك

المكون الاب

import { Component } from '@angular/core';
 
 
@Component({
  selector: 'app-hero-parent',
  template: 'app-hero-parent.html'
})
export class HeroParentComponent {

  //مجموعة من المتغيرات بالمكون الاب نقوم بتمريرها الى المكون الابن او المكونات الابناء
  my_website: string = 'exportdeveloper.com';


}

في ملف html الخاص بالمكون الاب نقوم باستدعاء المكون الابن  او المكونات الابناء  عن طريق اسم المكون الابن الذي عرفناه بمتغير ال selector بهدا الشكل

  <h2> Hello world !</h2>
   
  <app-hero-child [my_website]="my_website"></app-hero-child> <!-- نمرر القيم من الاب الى الابن-->

اداة الربط هي app-hero-child وهي الاسم الذي يمثل المكون وعادة نعرفه بمتغير الـ selector بالمكون

وسنعرفه بهذا الشكل

import { Component, Input } from '@angular/core';
  
@Component({
  selector: 'app-hero-child',  // اداة الربط التي تعرف المكون حيث تستطيع من خلالها استدعائه 
  template: 'app-hero-child.html'
})
export class HeroChildComponent {
   // نقوم بتعريف المتغيرات التي يستقبلها المكون الابن من الاب عن طريق اضافة  @Input() 
  @Input() my_website: string;
   
   // متغيرات الابن
   var1: string;
   var2: number;
   var3: boolean;
}

ملف html الخاص بالمكون الابن

  <h2> Hi Child !</h2>
  
<h2 *ngIf='my_website'> {{my_website}} </h2><!-- تمرير المتغير الى ملف العرض الخاص بالابن-->