https://github.com/samcodex/ng-arch-ui

https://github.com/samcodex/ng-arch-ui

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/samcodex/ng-arch-ui
• Owner: samcodex
• Created: 2019-04-08T03:27:06.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:30:30.000Z (about 2 years ago)
• Last Synced: 2025-01-16T00:35:28.530Z (12 days ago)
• Language: TypeScript
• Size: 1.35 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 31
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NgArchUi

Angular window layout. 

NgArchUi implements Window layout. It provides three major ui elements: Desktop, Window and Panel.

  1. Desktop is the root of ui and cannot be removed.

  2. Window contains any number of windows and panels. It can be added and removed.

  3. Panel does not contain other elements. It can be added and removed.

## Demo

The current project example:







NgArch project, https://github.com/samcodex/ngarch-app



## Installation

npm install ng-arch-ui --save

## Usage

### **Firstly, import NgArchUi module and the relative style**

* import module in the AppModule

```

  import { NgArchUiModule } from 'ng-arch-ui';

  ...

  @NgModule({

    ...

    imports: [

      NgArchUiModule

    ]

  })

```

* import angular2-draggable style in angular.json

```

  "styles": [

    ...

    "node_modules/angular2-draggable/css/resizable.min.css"

  ],

```

### **Secondly, use NgArchUiService and NgArchUi component in the host component**

The 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. 

```

  

```

  Use the following css to display the Desktop area

```

  ng-arch-ui {

    width: 80%;

    height: 600px;

    border: 1px solid gray;

  }

```

* 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.

```

  @Component({

    ...

    providers: [

      NgArchUiService

    ]

  })

```

* Inject the require two services: ComponentFactoryResolver and NgArchUiService in the host component.

(NgArchUIService requires the host's ComponentFactoryResolver to dynamically create content component)


```

  constructor(

    private resolver: ComponentFactoryResolver,

    private ngArchUiService: NgArchUiService

    ... 

  ) {

    ... 

  }

```

```

  ngOnInit() {

    ...

    // register resolver

    this.ngArchUiService.registerResolver(this.resolver);

    // assign the content component for the desktop.

    this.ngArchUiService.assignDesktopComponentClass(UiExampleDesktopComponent);

    ...

  }

```

### **Thirdly, create windows and panels on the top element**

* Create new window

```

  // create a new window with UserWindowComponent.

  const userWindow = ArchUi.createWindowWithContentComponent('User', UserWindowComponent);

  // pass the data to the new window

  // the new window is appended to the top element which could be Desktop or Window

  const transferData = { UserName: 'Selina', Address: { City: 'Toronto', Country: 'Canada'}};

  const userWindow = ArchUi.createWindowWithContentComponent('User', UserWindowComponent);

  this.ngArchUiService.renderElementOnTop(userWindow, transferData);

```

* Create new panel

```

  // create a new panel with UserInfoPanelComponent

  const userWindow = ArchUi.createPanelWithContentComponent('User Info', UserInfoPanelComponent);

  // append the new panel to the Desktop or the top Window

  this.ngArchUiService.renderElementOnTop(userWindow);

```

## Public APIs

* ArchUI.createWindowWithContentComponent(title: string, component: Type\)

* ArchUI.createPanelWithContentComponent(title: string, component: Type\)

* NgArchUiService.renderArchUiElement(uiElement: ArchUiElement, 

  transferData: object = null, elementOptions?: NgArchUiElementOptions)

* NgArchUiService.registerResolver(resolver: ComponentFactoryResolver)

* NgArchUiService.assignDesktopComponentClass(clazz: Type\)

## License

MIT