0

@angular/material offers a few items that can be displayed without including a selector in your HTML. For example, Snackbar can be shown by simply injecting an MdSnackBar and then calling open on it. You don't need to have anything like <md-snackbar></md-snackbar> or <div mdSnackBar></div>. When you call open, it is drawn at the top or bottom of your page regardless of where this was called from, and no selector element in the template is needed.

I'd like to create a component that works this way as well but I can't find a straightforward example of how to do this. I think likely I just don't know what this technique is called so I'm not sure what to search for.

All the examples I see of things opening dialogs or whatever require that you have the selector in the HTML, which I know how to do. Even PrimeNG's dialog requires that you include <p-confirmDialog></p-confirmDialog> in your HTML to use it (from what I can tell).

How can I create a component that is shown dynamically with no selector in your template, such as the material snackbar?

WillyC
  • 3,917
  • 6
  • 35
  • 50
  • 2
    Did you try looking at the [snackbar source](https://github.com/angular/material2/tree/master/src/lib/snack-bar) to see how they did it? – Roddy of the Frozen Peas Sep 25 '17 at 23:30
  • Are you asking: "How to get access to elements that are not in HTML but they are in DOM"? – P.S. Sep 25 '17 at 23:33
  • I did, although it is not exactly a minimal example so I am having trouble figuring it out. I'm still looking there, but I was hoping this was a common pattern for which someone could point me to a tutorial. – WillyC Sep 25 '17 at 23:33
  • Are you looking for this https://stackoverflow.com/questions/39685125/angular-2-0-final-how-to-instantiate-a-component-from-code? – Ploppy Sep 25 '17 at 23:34
  • @CommercialSuicide No. I mean, if that is how I accomplish this then I guess that's what I need to do, but that's not my question. My question is how to display something in angular dynamically without having to include the selector for it in my templates. – WillyC Sep 25 '17 at 23:35
  • @Ploppy In that example the poster is still using #placeholder - so the component they are authoring's template still has something that is used to inject the other component. With @angular/material's SnackBar, no such thing exists. You just call `open` in your ts file and it displays. Nothing related to it in the template. – WillyC Sep 25 '17 at 23:40
  • I'm pretty sure you can get the ref of the body and inject into it if that's what you're looking for. – Ploppy Sep 25 '17 at 23:42

1 Answers1

1

I think what you are looking for is "Entry Component " , using this you could add a component in angular without having to use any kind of selector .

You can refer to below link :

https://angular.io/guide/ngmodule-faq#q-entry-component-defined

pritesh agrawal
  • 1,155
  • 8
  • 16