{"id":24678618,"url":"https://github.com/samcodex/ng-arch-ui","last_synced_at":"2026-05-16T20:31:33.167Z","repository":{"id":37692977,"uuid":"180062456","full_name":"samcodex/ng-arch-ui","owner":"samcodex","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-07T04:30:30.000Z","size":1411,"stargazers_count":0,"open_issues_count":31,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-26T23:58:10.153Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samcodex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-08T03:27:06.000Z","updated_at":"2020-05-16T02:04:42.000Z","dependencies_parsed_at":"2023-02-06T11:46:51.356Z","dependency_job_id":null,"html_url":"https://github.com/samcodex/ng-arch-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samcodex%2Fng-arch-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samcodex%2Fng-arch-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samcodex%2Fng-arch-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samcodex%2Fng-arch-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samcodex","download_url":"https://codeload.github.com/samcodex/ng-arch-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244845855,"owners_count":20520034,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-26T13:17:46.436Z","updated_at":"2026-05-16T20:31:28.144Z","avatar_url":"https://github.com/samcodex.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgArchUi\n\nAngular window layout. \n\n\u003cb\u003eNgArchUi\u003c/b\u003e implements Window layout. It provides three major ui elements: Desktop, Window and Panel.\n  1. \u003cb\u003eDesktop\u003c/b\u003e is the root of ui and cannot be removed.\n  2. \u003cb\u003eWindow\u003c/b\u003e contains any number of windows and panels. It can be added and removed.\n  3. \u003cb\u003ePanel\u003c/b\u003e does not contain other elements. It can be added and removed.\n\n## Demo\n\n\u003cp\u003eThe current project example:\u003c/p\u003e\n\u003cimg src=\"src/assets/ng_arch_ui_demo.png\" width=\"600\"\u003e\n\u003cbr\u003e\u003cbr\u003e\n\u003cp\u003eNgArch project, https://github.com/samcodex/ngarch-app\u003c/p\u003e\n\u003cimg src=\"src/assets/ngapp_views.png\" width=\"600\"\u003e\n\n## Installation\n\nnpm install ng-arch-ui --save\n\n## Usage\n\n### **Firstly, import NgArchUi module and the relative style**\n* import module in the AppModule\n\n```\n  import { NgArchUiModule } from 'ng-arch-ui';\n  ...\n\n  @NgModule({\n    ...\n    imports: [\n      NgArchUiModule\n    ]\n  })\n```\n\n* import angular2-draggable style in angular.json\n```\n  \"styles\": [\n    ...\n    \"node_modules/angular2-draggable/css/resizable.min.css\"\n  ],\n```\n\n### **Secondly, use NgArchUiService and NgArchUi component in the host component**\nThe tag name of NgArchUi entry component is 'ng-arch-ui'. It is the area where the Desktop is located. Put the following code in the host template. \n```\n  \u003cng-arch-ui\u003e\u003c/ng-arch-ui\u003e\n```\n\n  Use the following css to display the Desktop area\n```\n  ng-arch-ui {\n    width: 80%;\n    height: 600px;\n    border: 1px solid gray;\n  }\n```\n\n* The main service is called NgArchUIService, and it should be provided in the host component. NgArchUIService can be provided in module level if only one NgArchUi is in the application.\n```\n  @Component({\n    ...\n    providers: [\n      NgArchUiService\n    ]\n  })\n```\n\n* Inject the require two services: ComponentFactoryResolver and NgArchUiService in the host component.\n\u003cp\u003e(NgArchUIService requires the host's ComponentFactoryResolver to dynamically create content component)\u003c/p\u003e\n\n```\n  constructor(\n    private resolver: ComponentFactoryResolver,\n    private ngArchUiService: NgArchUiService\n    ... \n  ) {\n    ... \n  }\n```\n\n```\n  ngOnInit() {\n    ...\n    // register resolver\n    this.ngArchUiService.registerResolver(this.resolver);\n\n    // assign the content component for the desktop.\n    this.ngArchUiService.assignDesktopComponentClass(UiExampleDesktopComponent);\n    ...\n  }\n```\n\n### **Thirdly, create windows and panels on the top element**\n\n* Create new window\n```\n  // create a new window with UserWindowComponent.\n  const userWindow = ArchUi.createWindowWithContentComponent('User', UserWindowComponent);\n\n  // pass the data to the new window\n  // the new window is appended to the top element which could be Desktop or Window\n  const transferData = { UserName: 'Selina', Address: { City: 'Toronto', Country: 'Canada'}};\n  const userWindow = ArchUi.createWindowWithContentComponent('User', UserWindowComponent);\n  this.ngArchUiService.renderElementOnTop(userWindow, transferData);\n```\n\n* Create new panel\n```\n  // create a new panel with UserInfoPanelComponent\n  const userWindow = ArchUi.createPanelWithContentComponent('User Info', UserInfoPanelComponent);\n\n  // append the new panel to the Desktop or the top Window\n  this.ngArchUiService.renderElementOnTop(userWindow);\n```\n\n## Public APIs\n\n* ArchUI.createWindowWithContentComponent(title: string, component: Type\\\u003cany\u003e)\n* ArchUI.createPanelWithContentComponent(title: string, component: Type\\\u003cany\u003e)\n* NgArchUiService.renderArchUiElement(uiElement: ArchUiElement, \n  transferData: object = null, elementOptions?: NgArchUiElementOptions)\n* NgArchUiService.registerResolver(resolver: ComponentFactoryResolver)\n* NgArchUiService.assignDesktopComponentClass(clazz: Type\\\u003cany\u003e)\n\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamcodex%2Fng-arch-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamcodex%2Fng-arch-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamcodex%2Fng-arch-ui/lists"}