# Adding multiple p5.js sketches with Angular 7

**URL:** <https://discourse.processing.org/t/adding-multiple-p5-js-sketches-with-angular-7/12150>\
**Category:** Libraries\
**Created:** [June 18, 2019, 1:10pm UTC](https://discourse.processing.org/t/adding-multiple-p5-js-sketches-with-angular-7/12150 "2019-06-18T13:10:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![thonpy](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@thonpy](https://discourse.processing.org/u/thonpy)\
**Post date:** [June 18, 2019, 1:10pm UTC](https://discourse.processing.org/t/adding-multiple-p5-js-sketches-with-angular-7/12150/1 "2019-06-18T13:10:12Z")

</div>

I am trying to make a website and in one page I am trying to integrate all my p5.js sketches into a single webpage. I have separate sketch.js files and I wanted to integrate it to the Angular project, any ideas on how to do it? Do I have to modify all the sketch.js into components? I am new to Angular, so I am not sure how to do it.

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [June 24, 2019, 9:01am UTC](https://discourse.processing.org/t/adding-multiple-p5-js-sketches-with-angular-7/12150/2 "2019-06-24T09:01:53Z")

</div>

I haven’t used angular in over a year so I’m probably not the best one to answer this but I would try to use [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode) and create a component that takes in a sketch function and use `new p5(sketch)` to create a canvas with that sketch. That way you could pass each sketch to the multiple instances of the same component. I’m not sure how helpful that is but best of luck.

---

<div class="post-metadata">

**Author:** ![thonpy](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@thonpy](https://discourse.processing.org/u/thonpy)\
**Post date:** [June 30, 2019, 9:11pm UTC](https://discourse.processing.org/t/adding-multiple-p5-js-sketches-with-angular-7/12150/3 "2019-06-30T21:11:17Z")

</div>

Thanks, I knew this way tho I was just looking to see if I could just have individual files and not separate component.