Include htm template into another one on Angular 6

Let's say you have this html:

<div class="componentA">ComponentA</div>
<div class="componentB">ComponentB</div>

and this code is into the `AppComponent. You can split this two div into two component:

ComponentA.ts

@Component({
  selector: 'componentA',
  templateUrl: 'componentA.component.html',
  styleUrls: ['componentA.component.scss'],

)}
export class ComponentA {

}

ComponentA.html

<div class="componentA">ComponentA</div>

ComponentB.ts

@Component({
  selector: 'componentB',
  templateUrl: 'componentB.component.html',
  styleUrls: ['componentB.component.scss'],

)}
export class ComponentB {

}

ComponentB.html

<div class="componentB">ComponentB</div>

then into your AppComponent.html :

<componentA></componentA>
<componentB></componentB>

• You need to write the second Component - Angular Components
• Add this component to your App.module.ts - Angular Modules
• If you have business logic you can also provide this by Services - Angular Services

In addition to answers above, don't forget to include

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

in your both components ts file.