Issue 1:
I have a following class

export class AddAnimalComponent {
public st: string;
public dyn: string;
public errMessage: string;
@Output() added = new EventEmitter<Animal>();

constructor() {
}

add() {
throw new Error('Not implemented');
}

clearErr() {
this.errMessage = '';
}

normalize() {
this.st = this.st.trim();
if (this.dyn) {
this.dyn = this.dyn.trim();
}
}

clear() {
this.clearErr();
this.st = '';
if (this.dyn) {
this.dyn = '';
}
}
}

And then a subclass:

@Component({
selector: 'add-expansion',
templateUrl: './templates/add-expansion.html',
directives: [MultiValueInput]
})

export class AddExpansionComponent extends AddAnimalComponent implements AfterViewInit {
//@Input('expansion') expansionType: string;

constructor(private _animalService: AnimalService,
@Inject('App.constants') private constants,
private toastr: ToastsManager
) {
super();
}

ngAfterViewInit() {
//if (!this.expansionType) {
// throw new Error('No expansion synonym type specified.');
//}
}

add() {
this.clearErr();
this.normalize();

if (this.st && this.st.length) {
let abbr = new Animal(this.st);
this._animalService.addAnimal(this.constants.activePartner, 'expansion-synonym', abbr)
.subscribe((data) => {
if (!data.success) {
this.toastr.error(data.error, 'Oops');
if (data.result) {
this.errMessage = 'Existed: ' + JSON.stringify(data.result[0]);
}
} else {
abbr = new Animal(data.result.st, data.result.dyn, data.result._id, data.result.status, data.result.action, data.result.newdyn);
this.added.emit(abbr);
this.clear();
}
},
(err) => { this.errMessage = `Oops, server error: ${err}`; }
);

}
}

onDuplicate(item) {
this.toastr.warning(`You have entered '${item}' more than once.`);
}

}

When I have @input expansionType defined, the line

this.added.emit(abbr); is not emitting any events. However, once I got all expansionType commented, the emit works.

Issue 2:
I'm submitting a ... (check one with "x")

bug report => search github for a similar issue or PR before submitting

Current behavior

[ngStyle] is ignored when using a dynamic component

Expected behavior

[ngStyle] should not be ignored

Minimal reproduction of the problem with instructions

Using the quick start, here are the relevant changes (I couldn't find a ready to use plunker I can duplicate and share...)

Add a dynamic component:

@Component({
selector: "dynamic",
template: `<div [ngStyle]="{color: 'red'}">Red</div>`
})
export class DynamicComponent { }

in app.component.ts:

@Component({
selector: 'my-app',
template: `<h1 [ngStyle]="{color: 'red' }">Hello {{name}}</h1>`
})
export class AppComponent {
name = 'Angular';
constructor(private injector: Injector,
private componentFactoryResolver: ComponentFactoryResolver,) {
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
let divComp = document.getElementById("thisOne");
componentFactory.create(this.injector, [], divComp);
}
}

in index.html add a div and remove all existing styles:

<body>
<div id="thisOne"></div>
<my-app>Loading AppComponent content here ...</my-app>
</body>

This is what I get:

the word "red" should be in red color I believe, unless I did something wrong.

Please tell us about your environment:

I'm using visual studio, but I don't think it matters here as I was able to reproduce it in a plunker that I can't share for some reason...

Angular version: 4.0.3

Browser: checked on Chrome, but probably all

Language: TypeScript 2.2.1 | ES6