These are chat archives for angular/angular-2-ionic-2

18th
Mar 2015
Miško Hevery
@mhevery
Mar 18 2015 19:48
Hello all
Andrew Joslin
@ajoslin
Mar 18 2015 19:49
hello!
Miško Hevery
@mhevery
Mar 18 2015 19:51
The technology is working. :-)
Rado Kirov
@rkirov
Mar 18 2015 19:53
Hello, Madison
Andrew Joslin
@ajoslin
Mar 18 2015 20:04
thanks for the room.
Miško Hevery
@mhevery
Mar 18 2015 20:17
This is going to be fun!
Max Lynch
@mlynch
Mar 18 2015 20:35
I'm trying to figure out how to programmatically create components with the attached compiled and rendered template (to inject into body). In this example, for a modal window that slides in off screen. Any way to do that?
Similar to how we used to call $compile()
The dev would just have to do Modal.show() and it would create the modal element, inject into body, and show
Going to post in angular/angular
Miško Hevery
@mhevery
Mar 18 2015 20:45
I think you want this: angular/angular#932
But it is not yet implemnted.
For a short term hack, you can check out how bootstrap function works.
Max Lynch
@mlynch
Mar 18 2015 20:47
Cool, thanks, will do!
Rado Kirov
@rkirov
Mar 18 2015 22:00
Take a look at Compiler and TemplateResolver
both are injectable
You can use TemplateResolver to spoof a Template annotation using inline to drop your template
TemplateResolver maps ComponentClass -> Template annotation, then you can use Compiler.compile to ComponentClass -> ProtoView, finally ProtoView.instantiate should give you an honest-to-god View that has view.nodes as it's DOM nodes that you can put whereever you need them
Needless to say, this is going through tons of internal APIs, to get you unstuck and is not something we are recommending
Rado Kirov
@rkirov
Mar 18 2015 22:06
In fact, we would like to move away from dynamic string -> component compilation. If the dynamic parts of the template can be completely described through the template syntax - *if, *foreach, that gives us opportunity for reuse of internal data structures and gain a lot of perf improvements.
Max Lynch
@mlynch
Mar 18 2015 22:20
awesome, thanks :) let me play with that, and we will probably just wrap it to be safe given the internal APIs
Rado Kirov
@rkirov
Mar 18 2015 22:43
you are welcome, let me know how it goes. I would like to see your usecase afterwards, and see if we can abstract into a higher-level capability like #932 or #1002 that doesn't expose the compiler.
Andrew Joslin
@ajoslin
Mar 18 2015 22:58
is it possible to access the component's element in the template?
usecase: I have an <ion-side-menu>. I want to bind the open class to the <ion-side-menu>'s open state
ideally, I would somehow be able to write in the template<root [class.open]="isOpen">
currently I'm doing this on my SideMenu class:
  open() {
    this.el.domElement.classList.add('open');
    this.isOpen = true;
  }
but I'd like the class itself to just be a binding.
Rado Kirov
@rkirov
Mar 18 2015 23:15
[class.open] should work
Andrew Joslin
@ajoslin
Mar 18 2015 23:15
yes, but how do I put it on a root element of a component? how can the element of the component itself assign attr-bindings?
Rado Kirov
@rkirov
Mar 18 2015 23:17
I see, yeah, that's not possible now.
logically the component element lives in the instantiating component
I mean if CmpA has <cmp-b> in its template, the actual DOM node <cmp-b> is part of CmpA not CmpB.
temp solution is to wrap all of <ion-side-menu> template in a <div [class.open]="isOpen"> and file a github issue to track this
Perry Govier
@perrygovier
Mar 18 2015 23:21
would parentElement work?
Rado Kirov
@rkirov
Mar 18 2015 23:21
you can inject domElement as @ajoslin is doing, but you can't set dynamic bindings on it