# Forms and Angular

**URL:** <https://community.hubspot.com/t/forms-and-angular/11801>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [November 20, 2017, 6:58pm UTC](https://community.hubspot.com/t/forms-and-angular/11801 "2017-11-20T18:58:30Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [September 11, 2018, 2:31am UTC](https://community.hubspot.com/t/forms-and-angular/11801/7 "2018-09-11T02:31:36Z")

</div>

Well, I hope you might have already figured this out. But this might be helpful for people who are looking further. I had the same requirement and this is how I did it and it’s working perfectly.

In Index.html:  
\< script charset=“utf-8” type=“text/javascript” src=“[https://js.hsforms.net/forms/shell.js](https://js.hsforms.net/forms/shell.js)”\>

In Template:  
\< div id=“hubspotForm”\>

In Component:

declare var hbspt: any // put this at the top

ngAfterViewInit(){  
hbspt.forms.create({  
portalId: “[YOUR-PORTAL-ID]”,  
formId: “[YOUR-FORM-ID]”,  
target: “#hubspotForm”  
});  
window.scrollTo(0, 0); // used this because the scroll position is not at the top after inserting the form, so i’m manually pushing it  
 ![wink.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/3/354f8117225a713f67ea0ee521e78b07a7444b01.png)

}

Cheers

---

_[View the full topic](https://community.hubspot.com/t/forms-and-angular/11801)._