How to include html file in angular 12 component?

·

,
How to include html file in angular 12 component?

Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, How to include html file in angular 12 component?

Working Video
How to include html file in angular 12 component?
How to include html file in angular 12 component?

Guy’s Angular 12 came . if you are new then you must check below two links:

  1. Angular12 Basic Tutorials
  2. Angular Free Templates

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 12 setup and for this we need to run below commands also , bootstrap 5 and html loader modules. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulardemo //Create new Angular Project

cd angulardemo // Go inside the Angular Project Folder

npm add html-loader 

npm i bootstrap

2. Guy’s now we need to create `typings.d.ts` file inside angulardemo/src folder and add below code inside it:

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

3. Guy’s now add below code inside angulardemo/tsconfig.json file to call typing.d.ts file:

{
  ...
    "typeRoots": [ 
    ...
    "../src/typings.d.ts" ],
   ...
}

4. Now guy’s create `testing.component.html` file inside angulardemo/src/app folder and add below html code inside:

<div class="container">
    <h3 class="p-5 text-center text-decoration-underline">I am coming from test.component.html file:</h3>
    <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
      <div class="col">
        <div class="p-3 border bg-light">Row column</div>
      </div>
      <div class="col">
        <div class="p-3 border bg-light">Row column</div>
      </div>
      <div class="col">
        <div class="p-3 border bg-light">Row column</div>
      </div>
      <div class="col">
        <div class="p-3 border bg-light">Row column</div>
      </div>
      <div class="col">
        <div class="p-3 border bg-light">Row column</div>
      </div>
      
    </div>
  </div>

5. Now guy’s add below code inside angulardemo/src/app/app.component.html file:

<!--Call File-->

<div innerHtml="{{test}}"></div>

6. Now guy’s add below code inside angulardemo/src/app/app.component.ts file:

...
export class AppComponent {
 ...
  test:any
  constructor() {
    this.test = require('html-loader!./testing.component.html');
    this.test = this.test.default;
  }

}

Now we are done friends. and please ng serve command to see the output. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements. For better live working experience, please check the video on the top.

Chamkila

Thanks

Comments

8 responses to “How to include html file in angular 12 component?”

  1. JF Avatar
    JF

    great, I have a question how do I get what the user has entered in the ngx-editor, and then show it again, thanks for taking the time to share knowledge

  2. Ankit Vashishta Avatar
    Ankit Vashishta

    ./src/assets/helloworld.html:1:6 – Error: Module parse failed: Unexpected token (1:6)
    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
    > hello world

  3. Ajay Malhotra Avatar

    I will update you on this, thanks.

  4. Ajay Malhotra Avatar

    Please run this command
    npm add html-loader

  5. Dheer Singh Avatar
    Dheer Singh

    Thanks MALHOTRA,
    The greate info, html data is working fine in angular 12.

  6. therichpost Avatar

    You are welcome 🙂

  7. AI Avatar
    AI

    Unable to do so.