Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular component in a Browser's child window

From an Angular application is there any way that I can create a Browser's child window and show some predefined angular component in it.

Clarification : I am not looking for a Modal dialog solution.

like image 766
Shrikey Avatar asked Dec 06 '18 06:12

Shrikey


People also ask

How to communicate between parent and child components in angular?

@Input() and @Output() give a child component a way to communicate with its parent component. @Input() lets a parent component update data in the child component. Conversely, @Output() lets the child send data to a parent component.

How do I close the browser window in angular 6?

1 Answer. Show activity on this post. open(location, '_self'). close();


1 Answers

I landed on this post before, so in case someone still trying to render a component dynamically loaded on a different window without running a new app, this is how I did it:

export class ChildLoaderComponent implements OnInit, AfterViewInit {
  constructor(private r: ComponentFactoryResolver, private 
                           viewContainerRef: ViewContainerRef) { }
  public windowReference: any;
  ngAfterViewInit() {
    setTimeout(() => {
      //create the component dynamically
      const factory = this.r.resolveComponentFactory(AChildComponent);
      const comp: ComponentRef<AChildComponent> =
        this.viewContainerRef.createComponent(factory);
      //in case you also need to inject an input to the child, 
      //like the windows reference 
      comp.instance.someInputField = this.windowReference.document.body;
      //add you freshly baked component on the windows
      this.windowReference.document.body.appendChild(comp.location.nativeElement);
    });
  }

  ngOnInit() {
    //create the windows and save the reference     
    this.windowReference = window.open('', '_blank', 'toolbar=0, width=800, height=400');
  }
}
like image 192
RowdyArg Avatar answered Oct 02 '22 15:10

RowdyArg