вызывать общие generi c html из двух разных компонентов

Question

Ниже приведен пример кода для моего требования. Вот фрагмент кода из app.component. html

<ul>
  <li><a [routerLink]="['main']" routerLinkActive="active">main</a></li>
  <li><a [routerLink]="['report']" >report</a></li>

</ul>
<div>

</div>
<router-outlet></router-outlet>

Ниже приведен фрагмент кода из app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from '../app/main/main.component';
import { ReportComponent } from '../app/report/report.component';

const routes: Routes = [{ path: 'main', component: MainComponent },
{ path: 'report', component: ReportComponent }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Ниже фрагмент кода из ' main.component. html '. Как добавить сюда generi c html

<p>main works!</p>

Ниже приведен фрагмент кода из main.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {

  customer: Array<Customer> = [];
  header : string;

  constructor() { }

  ngOnInit(): void {
    this.LoadData()
    this.checkNoData();
  }

  LoadData(){
    // Customer Data ia binded to the table
  }

  checkNoData(){

     if (this.customer.length == 0){
       this.header = "Customer Details"
     }


  }
}

Ниже приведен фрагмент кода из report.component. html. Как добавить здесь generi c html

<p>report works!</p>

Ниже приведен фрагмент кода из 'report.component.ts'

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.css']
})
export class ReportComponent implements OnInit {

  employees: Array<Employee> = [];
  header : string;

  constructor() { }

  ngOnInit(): void {
    this.LoadData()
    this.checkNoData();
  }

  LoadData(){
    // Customer Data ia binded to the table
  }

  checkNoData(){

     if (this.employees.length == 0){
       this.header = "Employee Details";


     }


  }

}

Ниже фрагмент кода generi c шаблон

<div class="alert-msg" role="alert" id="NoRecord"  >
    <div class="dsg-title"><span [innerHTML]='header'></span> </div>
    <div class="panel panel-default">
       <div class="alert  ">
          <div class="row">
             <div class="col-md-12 col-sm-12 text-center">
                <h2 class="dsg-h2"><span>No search results found.</span></h2>
             </div>
          </div>
       </div>
    </div>
 </div>

Проблема 1. Как мне интегрировать общие c html в основной компонент. html и показывать общие c теги div при наличии CheckNoData. Функция вызывается

Проблема 2. Как передать значение 'Заголовок', которое установлено в функции данных CheckNo.

Проблема 3. Есть ли лучший подход для обработки общих c html в angular 9 версии и последней node js