Working with Bootstrap Multiple Component

Angular supports bootstrapping multiple components, in real time it is not a recommended practice due to performance issue, the same can be achieved using nested component

HeaderComponent.ts

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

@Component({

  selector: 'app-header',

  template: `

  <table style="margin:30px">

   <tr>

   <td>

     <img src="../assets/uday.png" height="120" width="120">

   </td>

   <td>

     <h2>Dot Net By Rajakonda Uday..</h2>

     <h2>Hyderabad</h2>

   </td>

   </tr>

  </table>

`,

styles: [

"td{padding:10px},h2{color:blue}"

]

})

export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {

  }

}

Body Component.ts

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

@Component({

  selector: 'app-body',

  templateUrl: './body.component.html',

  styleUrls: ['./body.component.css']

})

export class BodyComponent {

}

BodyComponent.html

<div>

    Welcome To My Site.

    ...

     </div>

Output