How to add climate clock widget in my angular project

user_4527185 0
Viewed 563

How can I add this https://climateclock.world/widget in my angular project?

after adding

<script src="https://climateclock.world/widget-v2.js" async></script>
<script src="https://climateclock.world/flatten.js" async></script>
<climate-clock />

in the HTML file, I get the following error

ERROR in Errors parsing template: Only void and foreign elements can be self closed "climate-clock" 
("d/widget-v2.js" async></script>
<script src="https://climateclock.world/flatten.js" async></script>
[ERROR ->]<climate-clock />
angular typescript javascript
1 Answers

You need to do a few things:

Change <climate-clock /> to <climate-clock></climate-clock>

Allow foreign elements in your module, add schemas: [CUSTOM_ELEMENTS_SCHEMA] to your app module - this tells angular to allow elements it is not familiar with in your templates:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Make sure you load the external scripts in your main index.html

see stackblitz for a working sample

user_31869410
Related