*ngComponentOutlet and parameters

Question

I have one child component type (childComponent) which allows me to inject different data via input parameter. I created a button in this component which opens a sidenav element hosted in parent component (app). I use a service architecture to realize that (settingsService) and this part works fine. Now I want to inject another component into the sidenav (settingComponent) which displays data of childComponent.

I use the ngComponentOutlet directive for that and the SettingsComponent HTML is displayed in the sidenav correctly but I don't know how to modify the input variables of the instance. I read some articles and it seems that somehow I need to get the ComponentRef that ngComponentOutlet creates to modify the variables but I have no clue how. I think this magic should be done somewhere inside the subscription.

app.html

<md-sidenav-container class="sidenav-container">

  <md-sidenav #sidenav class="settings" align="end" mode="over" >
    <ng-container *ngComponentOutlet="settingComponent"></ng-container>
  </md-sidenav>

  <div>
    <a2c-component></a2c-component>
  </div>

  <div>
    // 2nd component (same type with different data)
    <a2c-component></a2c-component>
  </div>

</md-sidenav-container>

app.ts

@Component({
  selector: 'a2c-app',
  template: require('./app.html'),
  viewProviders: [ NgComponentOutlet ]
})
export class AppComponent implements OnInit {

  @ViewChild('sidenav') public settingsBarNavigation: MdSidenav;

  private settingComponent: any;

  constructor(private settingsBarService: SettingsBarService) { }

  public ngOnInit() {
    this.settingsBarService.settingsComponent$.subscribe((_value) => {

        this.settingComponent = _value.component;

        // add settings to new instance here so that
        // <instance of component>.parameterObj.someString = _value.settings.title

        this.settingsBarNavigation.open();
    });
  }
}

settingsService.ts

@Injectable()
export class SettingsBarService {

  public settingsComponent$: Observable<{ component: any, settings: Object}>;
  private settingsComponent: Subject<{ component: any, settings: Object}>;

  constructor() {
    this.settingsComponent = new Subject<{ component: any, settings: Object}>();
    this.settingsComponent$ = this.settingsComponent.asObservable();
  }

  public openSettings(_settingsComponent: any, _settings { title: string, id: number}) {
    this.settingsComponent.next( { component: _settingsComponent, settings: _settings });
  }
}

childComponent.html

<div>
  <button md-button (click)="openSettings()">Open settings</button>
</div>

childComponent.ts

@Component({
  selector: 'a2c-component',
  template: require('./childComponent.html')
})
export class ChildComponent {
  private settings: Object;

  constructor(private setBarService: SettingsBarService) {
    // dynamicly filled for each instance of component
    this.settings = { title: 'Hello World!', id: 42 }; 
  }

  // open DynamicLoadedComponent in sideNav
  public openSettings() {
    this.setBarService.openSettings(DynamicLoadedComponent, this.settings);
  }
}

settingComponent.html

<div>{{ parameterObj.someString }}</div>

settingComponent.ts

@Component({
  selector: 'a2c-dynLoaded',
  template: require('./settingComponent.html')
})
export class DynamicLoadedComponent {

  @Input('parameterObj') public parameterObj: { someString: string };

  constructor() { }
}