Categories

Thursday, March 28, 2024
#919814419350 therichposts@gmail.com
Angular7Javascript

Angular 7 include html template working example

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

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

23 Comments

Leave a Reply

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