Created
April 28, 2020 16:19
-
-
Save minhazfm/65951e58b0070c461601e462a53a9871 to your computer and use it in GitHub Desktop.
Angular Dynamic Child Component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- TypeScript --> | |
| import { Component, OnInit } from '@angular/core'; | |
| import { Observable } from 'rxjs'; | |
| import { ActivatedRoute, Router, ParamMap } from '@angular/router'; | |
| import { switchMap } from 'rxjs/operators'; | |
| export interface ParentRoomInterface { | |
| remove(roomNumber: string); | |
| } | |
| @Component({ | |
| selector: 'app-dynamic-room', | |
| templateUrl: './dynamic-room.component.html', | |
| styleUrls: ['./dynamic-room.component.css'] | |
| }) | |
| export class DynamicRoomComponent implements OnInit { | |
| // roomId$: Observable<string>; | |
| public roomNumber: string; | |
| public selfRef: DynamicRoomComponent; | |
| public parentInteraction: ParentRoomInterface; | |
| constructor( | |
| private route: ActivatedRoute, | |
| private router: Router | |
| ) { } | |
| ngOnDestroy() { | |
| console.log('DynamicRoomComponent Destroyed'); | |
| } | |
| ngOnInit(): void { | |
| this.roomNumber = this.route.snapshot.paramMap.get('id'); | |
| // this.roomId$ = this.route.paramMap | |
| // .pipe( | |
| // switchMap((params: ParamMap) => { | |
| // return params.get('id'); | |
| // }) | |
| // ); | |
| } | |
| remove() { | |
| this.parentInteraction.remove(this.roomNumber); | |
| } | |
| } | |
| import { Component, OnInit, ComponentFactoryResolver, ViewContainerRef, ViewChild, ComponentRef } from '@angular/core'; | |
| import { Room, User } from '@app/models/user'; | |
| import { DynamicRoomComponent } from '@app/dynamic-room/dynamic-room.component'; | |
| import { v4 } from 'uuid'; | |
| import { UserService } from '@app/services/user.service'; | |
| @Component({ | |
| selector: 'app-dashboard', | |
| templateUrl: './dashboard.component.html', | |
| styleUrls: ['./dashboard.component.css'] | |
| }) | |
| export class DashboardComponent implements OnInit { | |
| @ViewChild('viewContainerRef', { read: ViewContainerRef }) VCR: ViewContainerRef; | |
| dynamicComponents: Array<ComponentRef<DynamicRoomComponent>> = []; | |
| constructor( | |
| protected componentFR: ComponentFactoryResolver, | |
| protected _userService: UserService | |
| ) { | |
| this._userService.clinicRooms$ | |
| .subscribe(values => values.map(x => this.createComponent(x))); | |
| } | |
| ngOnInit(): void { | |
| } | |
| createComponent(room: Room) { | |
| let componentFactory = this.componentFR.resolveComponentFactory(DynamicRoomComponent); | |
| let componentRef: ComponentRef<DynamicRoomComponent> = this.VCR.createComponent(componentFactory); | |
| let currentComponent = componentRef.instance; | |
| currentComponent.selfRef = currentComponent; | |
| currentComponent.roomNumber = room.id; | |
| // currentComponent.index = ++this.index; | |
| // prividing parent Component reference to get access to parent class methods | |
| currentComponent.parentInteraction = this; | |
| // add reference for newly created component | |
| this.dynamicComponents.push(componentRef); | |
| } | |
| remove(roomNumber: string) { | |
| if (this.VCR.length < 1) { | |
| return; | |
| } | |
| let componentRef = this.dynamicComponents.find(x => x.instance.roomNumber === roomNumber ); | |
| // let component: DynamicRoomComponent = <DynamicRoomComponent>componentRef.instance; | |
| let vcrIndex: number = this.VCR.indexOf(componentRef.hostView); | |
| this.VCR.remove(vcrIndex); | |
| this.dynamicComponents = this.dynamicComponents.filter(x => x.instance.roomNumber !== roomNumber); | |
| } | |
| onRoomSelected(room: Room) { | |
| console.log('On Room Selected ', room.name); | |
| } | |
| } | |
| <!-- HTML --> | |
| <div> | |
| <div> | |
| <app-rooms-list (roomSelected)="onRoomSelected($event)"></app-rooms-list> | |
| </div> | |
| </div> | |
| <div> | |
| <ng-template #viewContainerRef></ng-template> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment