René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Problem with components that are created with component factory resolver","articleBody":"_Description:_\r\nFirst of all, I am very happy to hear that we have official dev tool support. The bug is that I can't inspect components which i init with component factory resolver in mat-drawer-content component at components side of dev tools. \r\n...\r\n\r\n**Angular Devtools version (required)**: 1.0.0\r\n\r\n**Angular version (required):** 11.0.9 \r\n\r\n**Date:** 19.05.2021 GMT +03:00\r\n\r\n**OS:** Windows 10 Home 10.0.19042\r\n\r\n_Demo test application:_\r\n\r\n- Git repository for demo app showing the issue (optional but very helpful for difficult issues).\r\n- If a code snippet will completely show the issue, please include it.\r\n\r\nTypescript file.\r\n\r\n```typescript\r\n\r\nimport { CustomButtonComponent } from './../custom-button/custom-button.component';\r\nimport { Component, Input, OnInit, OnChanges, ViewChild, ViewContainerRef, ComponentFactoryResolver, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';\r\nimport { Menu } from 'src/models/menu/Menu';\r\nimport { ButtonConfig } from 'src/models/ButtonConfig';\r\nimport { UserManagementComponent } from '../user-management/user-management.component';\r\nimport { ActivityComponent } from '../activity/activity.component';\r\nimport { DashboardComponent } from '../dashboard/dashboard.component';\r\nimport { PolicyComponent } from '../policy/policy.component';\r\nimport { UserSettingsComponent } from 'src/app/user-settings/user-settings.component';\r\nimport { AlertsComponent } from 'src/app/alerts/alerts.component';\r\n\r\n@Component({\r\n  selector: 'app-custom-sidenav-menu',\r\n  templateUrl: './custom-sidenav-menu.component.html',\r\n  styleUrls: ['./custom-sidenav-menu.component.scss']\r\n})\r\nexport class CustomSidenavMenuComponent implements OnInit {\r\n  @ViewChild(\"buttonArea\",{read:ViewContainerRef}) buttonArea:ViewContainerRef | any;\r\n  @Input()\r\n  menuCollection!:Menu[] | any;\r\n  @Output()\r\n  buttonSelected = new EventEmitter\u003cany\u003e();\r\n  cleanMenuCollection : Menu[] | any\r\n  buttonConfig: never[] | any;\r\n  componentMap!:any\r\n  selectedMenu: ButtonConfig;\r\n  constructor(private componentFactoryResolver:ComponentFactoryResolver,private cdr : ChangeDetectorRef) {\r\n    this.componentMap  = {\r\n      \"Users\":UserManagementComponent,\r\n      \"Activity\":ActivityComponent,\r\n      \"Policy\":PolicyComponent,\r\n      \"Dashboard\":DashboardComponent,\r\n      \"User Settings\":UserSettingsComponent,\r\n      \"Alerts\": AlertsComponent\r\n    }\r\n  }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n  ngOnChanges(menuCollection:Menu[] | any){\r\n\r\n\r\n  }\r\n\r\n  ngAfterViewInit(){\r\n    this.cleanMenuCollection = [];\r\n    this.menuCollection.forEach((menuTemp:Menu) =\u003e {\r\n      let foundMenuItemsInBefore :any = this.cleanMenuCollection.find((data :Menu | any) =\u003e {\r\n        if(menuTemp.type ==  data.type){\r\n          return data;\r\n        }\r\n      })\r\n      if(foundMenuItemsInBefore == undefined){\r\n        this.cleanMenuCollection.push(menuTemp)\r\n      }\r\n    });\r\n\r\n\r\n    this.createButtons();\r\n  }\r\n  createButtons() {\r\n    this.buttonArea?.clear();\r\n    this.buttonConfig = this.cleanMenuCollection.map((data:Menu)=\u003e{\r\n      let key :any = this.componentMap[data.type];\r\n      let obj = {icon:data.icon,buttonClass:\"btn-transparent\",status:\"passive\",click:(event:any) =\u003e this.clickOnMenu(event),text:data.type,menuComponent:key}\r\n      let compRef = this.componentFactoryResolver.resolveComponentFactory(CustomButtonComponent);\r\n      let comp = this.buttonArea.createComponent(compRef);\r\n      comp.instance.config = obj\r\n      return obj\r\n    })\r\n    let dashboardButton=this.buttonConfig.find(config =\u003e config.text == 'Dashboard');\r\n    dashboardButton.buttonClass = \"btn-transparent menu-active\"\r\n    this.buttonSelected.emit(dashboardButton.menuComponent)\r\n    this.cdr.detectChanges();\r\n  }\r\n  clickOnMenu(event:any){\r\n    this.buttonConfig=this.buttonConfig.map((menuItem:ButtonConfig)=\u003e{\r\n      if(event.config != menuItem){\r\n        menuItem.buttonClass = 'btn-transparent';\r\n\r\n      }else{\r\n        menuItem.buttonClass = \"btn-transparent menu-active\"\r\n        if(this.selectedMenu?.text != menuItem.text){\r\n          this.selectedMenu = menuItem\r\n          this.buttonSelected.emit(menuItem.menuComponent)\r\n        }\r\n      }\r\n      return menuItem\r\n    })\r\n\r\n  }\r\n  // this.navbarButton = { icon: 'fas fa-bars', buttonClass: 'btn-transparent', status: \"passive\", click: (event: any) =\u003e this.navbarClick(event) }\r\n  getKeyByValue(object: { [x: string]: any; }, value: any) {\r\n    return Object.keys(object).find(key =\u003e object[key] === value);\r\n  }\r\n}\r\n```\r\nHtml File\r\n\r\n\r\n```html\r\n\u003cdiv class=\"application-container w-100 h-100\"\u003e\r\n  \u003cmat-drawer-container class=\"example-container h-100 w-100\"\u003e\r\n    \u003cmat-drawer class=\"mat-container\" #sidenav mode=\"side\" style=\"width: 15%;\"\u003e\r\n      \u003cdiv class=\"d-flex flex-column align-items-center justify-content-between p-2 overflow-hidden\"\u003e\r\n        \u003cdiv class=\"header w-100\"\u003e\r\n          \u003cspan class=\"header-text fs-4 w-100\"\u003e\r\n            {{this.user?.honeypot?. name}}\r\n          \u003c/span\u003e\r\n        \u003c/div\u003e\r\n        \u003cng-container #sidenavArea\u003e\u003c/ng-container\u003e\r\n      \u003c/div\u003e\r\n    \u003c/mat-drawer\u003e\r\n    \u003cmat-drawer-content class=\"component-area\"\u003e\r\n      \u003cng-container #componentArea\u003e\u003c/ng-container\u003e\r\n    \u003c/mat-drawer-content\u003e\r\n  \u003c/mat-drawer-container\u003e\r\n\u003c/div\u003e\r\n\r\n```\r\n_Description of issue:_\r\n\r\n![Capture](https://user-images.githubusercontent.com/30727839/118731168-788fb100-b841-11eb-9c5a-f07bf730c19b.PNG)\r\n\r\n\r\nAs you may see that components that should be produced ,are not shown. \r\n\r\nI appericiate your attention on this spesific problem in advance.","author":{"url":"https://github.com/ayberkaltuntabak","@type":"Person","name":"ayberkaltuntabak"},"datePublished":"2021-05-18T22:29:35.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":9},"url":"https://github.com/773/angular-devtools/issues/773"}