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.

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.

• javascript
• html
• angular
• typescript
• include

• I would suggest you to read about ponents: angular.io/guide/architecture-ponents – JeroenE Commented Nov 6, 2018 at 8:37

3 Answers 3

Let's say you have this html:

<div class="ponentA">ComponentA</div>
<div class="ponentB">ComponentB</div>

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

ComponentA.ts

@Component({
  selector: 'ponentA',
  templateUrl: 'ponentA.ponent.html',
  styleUrls: ['ponentA.ponent.scss'],

)}
export class ComponentA {

}

ComponentA.html

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

ComponentB.ts

@Component({
  selector: 'ponentB',
  templateUrl: 'ponentB.ponent.html',
  styleUrls: ['ponentB.ponent.scss'],

)}
export class ComponentB {

}

ComponentB.html

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

then into your AppComponent.html :

<ponentA></ponentA>
<ponentB></ponentB>

• You need to write the second Component - Angular Components
• Add this ponent 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 ponents ts file.