!(https://hackernoon.com/hn-images/1*hYmsOB52L4fxv0i5WN8IBA.png)\n\n**Update:** I wrote another blog post in which I explain how to achieve this exact same result using Portals from the Angular CDK. Please take a [look at it](https://hackernoon.com/a-first-look-into-the-angular-cdk-67e68807ed9b). If you’re not into magic and you want to know how to do it from scratch, then keep reading this article.\n\n### **Just show me the code**\n\nIf you’re somewhat like me, you just want to see the code and you’ll figure it out, so here you go. The following service has just one simple method `appendComponentToBody` which will append your component as a direct child of the body and also add it to the Angular’s component tree (so that it can be included in the Angular’s change detection cycle). **See working plunker at the end of this post.**\n\n### **Cool, but, da heck was that?**\n\nIf you got here after checking the code, then it means you need some explanation for what’s happening in that gist.\n\n#### A little bit of a context\n\nI first came across this problem a while ago when trying to add modals to my web app. I couldn’t find good documentation to dynamically add components to the body of my document. Some of the alternatives suggested adding _helper_ components at the `app.component.html` level to act as host containers, some others suggested passing the `viewRef` in `app.component.ts` to a custom service so that `app-root` could be used later as an anchor, etc. None of them I liked, though. I then traveled to ng-conf looking for an answer and asked Jeremy Elbourn (@jelbourn) about this where he pointed me to a couple of utility classes inside Angular Material.\n\n#### Navigating Angular Material\n\nSimply put, the angular material repo is **one hell of a good resource**. You should be studying it on a daily basis if you truly want to understand how to build robust and well written Angular components: [https://github.com/angular/material2](https://github.com/angular/material2).\n\nFinding how they append components to the body took me a while to understand, though. They call a bunch of methods, from a bunch of files, but I’m here to break it down for you. Let’s jump right in.\n\n### Breaking down the gist\n\nCheck the code snippet again and see the numbers in the comments. I’ll use those numbers to run the explanation.\n\n#### **1\\. Create a component reference**\n\nUse the `ComponentFactoryResolver` to create a reference of your component. As you’ll be adding your component to the `AppRef` (see step 2), you need to create this component using the Angular’s default Injector which is provided in the constructor.\n\n**Please note** that, at this point, you can use the `componentRef` to bind data to your component’s inputs as `componentRef.instance.myInput = 'yay!'` .\n\n#### 2\\. Attach component to Application Ref\n\nAt this point, you have a reference to your component, but it doesn’t live in Angular’s world yet. The component is not inside the ng component tree so Angular won’t run change detection on it. To allow change detection on our component we should attach it to the `ApplicationRef` .\n\n#### 3\\. Get the DOM element from the Component Ref\n\nWe’re almost there. We have a `componentRef` and it’s also living in Angular’s world. Now we want to see it rendered in the page and for that we have to get the DOM element out of the component. The code is pretty verbose to let TypeScript understand what we’re trying to achieve but, basically, we’re doing this to get the component’s DOM element: `componentRef.hostView.rootnodes` .\n\n#### 4\\. Append the component body\n\n**TL;DR.** Use the good old `document.body.appendChild` using the DOM element we got from step 3.\n\n**Some remarks about this**. It’s been told that Angular is a platform and that no `<body>` exists when running Angular on the server, on a Web Worker, on mobile (?), etc. But, having said that, I’m having a hard time trying to find a use case in which a dynamically created component will have to be rendered server-side, or some other context. I don’t know how it will work in Ionic, but for sure there’s a parent anchor DOM element which you can replace by `body` to make this work.\n\n#### 5\\. (Optional) Nuke it\n\nThis is let you know how to remove the component in just two steps:\n\n1. Detach the view from the `ApplicationRef` so that no change detection will be performed by Angular.\n2. Destroy the Component Ref. This will automatically remove the DOM element from the document.\n\n**Very important:** You will have to add your component to `entryComponents` in your main module declaration. This will allow Angular to create your component on the fly.\n\n**Working plunker:** [https://plnkr.co/edit/Yc1ijM6shHt2JAPi7Fdg](https://plnkr.co/edit/Yc1ijM6shHt2JAPi7Fdg)\n\n**Angular plugin using this approach:** [https://github.com/jdjuan/ng-notyf](https://github.com/jdjuan/ng-notyf)\n\nShow some love if you liked it. Leave a comment. Reach out to me at Twitter @caroso1222.