Include htm template into another one on Angular 6

Question

Actually, i have one HTML file which contains all the code. I want to split this one on multiple files and to include them.

How can i do this?

Thanks a lot.

Answer 1

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>

Answer 2

• 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