Tuesday, October 4, 2022

Angular 7 include html template working example


Hello to all, welcome to 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:

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
  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">
    Welcome to {{ title }}!
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
<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.


Thank you

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.