Renderer multiple selectRootElement Issue (with plnkr provided)

Question

I am trying to use Renderer.selectRootElement to get some elements from my Component, as described here .

Everything works fine, unless I select only one item ( plnkr ).

As you can see, I created the component:

export class ExampleComponent implements OnInit{
    @Input() start: any;
    @Input() end: any;

  constructor(public _renderer:Renderer){

  };

    ngOnChanges(){

    }
    ngOnInit(){
        console.log("NG ON CHAN START DATE",this.start);
        console.log("NG ON INIT END DATE",this.end);
        var container =  this._renderer.selectRootElement('.container');
        console.log(container);   
        var inner1 =  this._renderer.selectRootElement('.inner1');
        console.log(inner1);   
        var inner2 =  this._renderer.selectRootElement('.inner2');
        console.log(inner2);   
    }

}

When I try to run this, I have an error:

EXCEPTION: The selector “.inner1” does not match the elements in [{{exampleData.end}} in MainViewComponent @ 3: 65]

(however, in my application, when only the first container was found, no other was found).

Any ideas where this comes from?

UPDATE

I found out that the directive is not called completely - only div with a class is added to HTML container.

Answer 1

selectRootElement

- .

DomRootRenderer

selectRootElement(selector: string): Element {
    var el = DOM.querySelector(this._rootRenderer.document, selector);
    if (isBlank(el)) {
      throw new BaseException(`The selector "${selector}" did not match any elements`);
    }
    DOM.clearNodes(el);
    return el;
 }

- ? ! ? - ! , ? ?

<my-app>
    Loading...
</my-app>

! . , selectRootElement, ? ! , , , DynamicComponentLoader#loadAsRoot EventEmitter.

, selectRootElement, , , ?

.

• @ViewChild

<div #myElement>...</div>

@ViewChild('myElement') element: ElementRef;

ngAfterViewInit() {
   // Do something with this.element
}

@Directive({
    selector : '.inner1,inner2' // Specify all children
    // or make one generic
    // selector : '.inner'
})
class Children {}

template : `
    <div class="container">
        <div class="inner1"></div>
        <div class="inner2"></div>

        <!-- or one generic
            <div class="inner"></div>
            <div class="inner"></div>
        -->
    </div>
`
class Parent (
    @ViewChildren(Children) children: QueryList<Children>;
    ngAfterViewInit() {
        // Do something with this.children
    }
)