1

I am integrating html template into angular 8. I have created header, footer and sidebar component using CLI and paste header, footer and sidebar html code respectively into components. Then I have call them into app.component.html file like below:

<div id="main-wrapper">
    <app-header></app-header>
    <app-left-sidebar></app-left-sidebar>
    
    <app-footer></app-footer>
</div>

Then I have created one static folder into src/ named views. I have placed all my html files into this folder like home.html, about.html, contact.html etc... Now, when I am calling home.html into app.component.html like below:

<div id="main-wrapper">
    <app-header></app-header>
    <app-left-sidebar></app-left-sidebar>
    <div *ngIf="pageSlug == 'home'" ng-include="../views/home.html"></div>
    <div *ngIf="pageSlug == 'about'" ng-include="../views/about.html"></div>
    <div *ngIf="pageSlug == 'contact'" ng-include="../views/contact.html"></div>
    <app-footer></app-footer>
</div>

But including path like above not working. Any body let me know how can I achieve this and also I want to know is this correct way to integrate html template like this or we need to create component for all like home component, about component and contact component.

Thanks in advance for your time.

deepak tester
  • 11
  • 2
  • Isn't ng-include AngularJs? Nevertheless the standard way would be to create a component for each of your template – jBuchholz Feb 01 '20 at 07:09
  • ng-include doesn't support angular 2+. ng-include is for angular js. Please check this question https://stackoverflow.com/questions/43440422/what-is-the-alternative-for-ng-include-in-angular2 – Ramil Aliyev 007 Feb 01 '20 at 07:36
  • Thanks @Scorpioo590 . I am agree with you that it's nevertheless to create a component for each template. So, Can you please let me know what modification I need to do in my script to achieve this ? – deepak tester Feb 01 '20 at 10:42
  • If you created the components via call everything should have been done for you. You need the template alongside with a .ts file that handles the logic. This component must be registered in the app module in order to be accessible – jBuchholz Feb 02 '20 at 05:16
  • @Scorpioo590 As per your above comment, I think you said me to create components for home, about and contact pages and call that into app.component.html as per slug or page. Am I right ? – deepak tester Feb 02 '20 at 10:55
  • Create the components with the CLI. The `@Component` decorator will contain a field `selector` which will be set to `app-home` etc. In your `app.component.html` you can use these selectors to load the desired components into it. – jBuchholz Feb 03 '20 at 13:34

0 Answers0