Angular 7 include html template working example

·

,
angular7

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 7 include html template working example.

If you are new in Angular 7, then please check the my old posts related to Angular 7.

Updated this post with Angular 9 include html file and solve all issue regarding old version:

Include custom css file into our Angular 9

Angular Include Html

I am sure, this post will very helpful to all my blog viewers. Most of my Blog readers asked me many questions related to this post and finally I came this post : Angular include html template working example


Here are the coding snippets for Angular 7 include html template working example and please follow carefully:


1. Very First, please run the below commands into your terminals to install fresh Angular setup:

$ npm install -g @angular/cli 


ng new angularincludehtmltemplate //install new Angular 7 setup


cd angularincludehtmltemplate // Go inside fresh installed Angular 7 setup


ng serve // run angular 7 project


http://localhost:4200/ //run on browser

2. Now create views folder inside angularincludehtmltemplate\src folder:

create new folder angular 7

3. Now create new file named includehtmlfile.html inside angularincludehtmltemplate\src\views folder:

create new file angular 7

4. Now add any text inside angularincludehtmltemplate\src\views\includehtmlfile.html file:

WOW!!
includehtmlfile.html file has been included.

5. Now add below code into app.component.ts file:

import { Component } from '@angular/core';
import Html from "../views/includehtmlfile.html";  // Html file text import
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularincludehtmltemplate';
  test = Html;
}

After add import Html from “../views/includehtmlfile.html”; code into your app.component.ts file, you will get error like below image:

angular error

6. To overcome with above error, need to add below code into angularincludehtmltemplate\src\typings.d.ts file:

If you don’t get this file in Angular new version the please create into scr folder:

/* SystemJS module definition */
declare module '*html'
{
  const value:string;
  export default value
}

7. Now add below code into app.component.html file:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<!--Import Content Code -->
<div [innerHtml] = 'test'></div>

7. Now run ng serve command into your terminal and you will get below output:

If you have any query related to this post then comment below or ask question.

Harjas,

Thank you

Comments

23 responses to “Angular 7 include html template working example”

  1. ashwini Avatar
    ashwini

    and how to add the styles sheets to that same template in angular and routing also ,js files also??please explain me fast!!!

  2. Julien Pitt Avatar
    Julien Pitt

    Thank you for the post.

  3. jl Avatar
    jl

    I follow the tutorial but when run ng serve throws than error: You may need an appropriate loader to handle this file type.
    The only diference is than in my html I have html tags (no only strings).
    Thank you.

  4. Ajay Malhotra Avatar

    Can you please show your HTML code?

  5. jl Avatar
    jl

    Año de inicio

  6. jl Avatar
    jl

    sorry.

  7. jl Avatar
    jl

    Remove
    div class=”form-group”>
    input class=”form-control” [disabled]=”!env” type=”text”
    [(ngModel)]=”detail” name=”det”>
    /div>
    /div>”

  8. Ajay Malhotra Avatar

    you can email the code or file here: therichposts@gmail.com

  9. Saheb Ghosh Avatar
    Saheb Ghosh

    I am using angular 8 and did not had typings.d.ts file, but added that file under src and added your code, but when now having different issue which is given below:

    ERROR in ./src/views/AveragePrice_Historical.html 1:0
    Module parse failed: Unexpected token (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    >
    |
    |
    ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
    i 「wdm」: Failed to compile.

  10. Ajay Malhotra Avatar

    Try:

    Since in your webpack.config.js file you have

    resolve: {
    extensions: [”, ‘.ts’, ‘.js’, ‘.html’]
    },

  11. Akash Trivedi Avatar
    Akash Trivedi

    kuch ni chl rha h bhiya
    Module parse failed: Unexpected token (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

  12. Ajay Malhotra Avatar

    Hi, did you follow the above videos. Thanks

  13. vijay kumar baghel Avatar
    vijay kumar baghel

    i am working on angular 9 If i wanna make one button on html template then how will i make it.
    i am trying but it is not working(simple text is coming).
    and i follow the video

  14. Ajay Malhotra Avatar

    Simple button or button with click functionality?

  15. vijay kumar baghel Avatar
    vijay kumar baghel

    button with click function

  16. vijay kumar baghel Avatar
    vijay kumar baghel

    button with click fuctionality

  17. vijay kumar baghel Avatar
    vijay kumar baghel

    button with click functionality

  18. Vijay Kumar baghel Avatar
    Vijay Kumar baghel

    Button with click functionality

  19. Ajay Malhotra Avatar

    I will update you on this, thanks

  20. Vijay Kumar baghel Avatar
    Vijay Kumar baghel

    Button with click functionality please help

  21. Vijay Kumar baghel Avatar
    Vijay Kumar baghel

    You got anything which can help me

  22. Kartik Avatar
    Kartik

    Thanks