angular2-components

I'm using Angular 2-rc3 and have a Component and I want to apply transclusion, just in a bit of a different way. Here's my component: import { Component, Input } from '@angular/core'; @Component({ selector: 'my-list', template: `<ul> <li *ngFor="let item of data"> -- insert template here -- <ng-content></ng-content> </li> </ul>` }) export class MyListComponent { @Input() data: any[]; } And I use it like this: <my-list [data]="cars"> <div>{{item.make | uppercase}}</div> </my-list> As you can see, I'm trying to define an inline template that will be used by my component. Now this goes horribly

When we pass a model to the child component and it modifies it, the values are just reflected in the child components' local variable and not available to the parent. Can we pass values by reference from parent to child. So the changes are visible there as well. I have implemented the same using an observable at the service layer. But can't we pass by reference through @Input ? Primitive values ( string , num , boolean , object references) are passed by value (copied), objects and arrays are passed by reference (both components get a reference to the same object instance). Just wrap your

I have an Angular 2 component where I want to retrieve an element div <div id ="myId"> by its id. I try doing: document.getElementById("myId") in my component (TypeScript), but i get an error: "cannot find name document". I see that in other posts we can do something similar using @ViewChild, however I don't see how we can use this with a div, any ideas? You can use @ViewChild with a div by adding a TemplateRef . Template <div id ="myId" #myId> Component import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app

Question I'm looking for the best approach for injecting a known/defined component into the root of an application and projecting @Input() options onto that component. Requirement This is necessary for creating things like modals/tooltips in the body of the application so that overflow:hidden /etc will not distort the position or cut it off completely. Research I've found that I can get the ApplicationRef 's and then hackily traverse upwards and find the ViewContainerRef . constructor(private applicationRef: ApplicationRef) { } getRootViewContainerRef(): ViewContainerRef { return this

In angular 2, is it possible to manually instantiate a component A, then pass it around and render in the template of component B? Günter Zöchbauer Yes, that's supported. You need a ViewComponentRef that can for example be acquired by injecting it to the constructor or using a @ViewChild('targetname') query and a ComponentResolver that also can be injected. This code example from https://stackoverflow.com/a/36325468/217408 allows for example to add components dynamically with *ngFor @Component({ selector: 'dcl-wrapper', template: `<div #target></div>` }) export class DclWrapper { @ViewChild(

Given the following code I try to test the ngOnChanges lifecycle hook of Angular2: import { it, inject, fdescribe, beforeEachProviders, } from '@angular/core/testing'; import {TestComponentBuilder} from '@angular/compiler/testing'; import {Component, OnChanges, Input} from '@angular/core'; @Component({ selector: 'test', template: `<p>{{value}}</p>`, }) export class TestComponent implements OnChanges { @Input() value: string; ngOnChanges(changes: {}): any { // should be called } } fdescribe('TestComponent', () => { let tcb: TestComponentBuilder; beforeEachProviders(() => [ TestComponentBuilder,