https://github.com/sumn2u/angular-cdk-portals
Angular CDK portal example
https://github.com/sumn2u/angular-cdk-portals
angular angular-material portals typescript
Last synced: 2 months ago
JSON representation
Angular CDK portal example
- Host: GitHub
- URL: https://github.com/sumn2u/angular-cdk-portals
- Owner: sumn2u
- Created: 2018-08-24T19:08:12.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-05-26T11:03:33.000Z (about 7 years ago)
- Last Synced: 2025-02-14T08:51:26.615Z (over 1 year ago)
- Topics: angular, angular-material, portals, typescript
- Language: TypeScript
- Homepage: https://sumn2u.github.io/angular-cdk-portals/
- Size: 317 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Anguar CDK portals example
###
View [article](https://medium.com/@sumn2u/dynamic-ui-using-portals-in-angular-cdk-6051988b0f81)
## Prerequisites
You will need the following things properly installed on your laptop/pc.
* [Git](http://git-scm.com/)
* [Node.js](http://nodejs.org/) (with NPM)
## Installing Nodejs via `nvm` [docs](https://github.com/creationix/nvm)
* **Install Script**
-`curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash`
- or `wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash`
* **Load nvm**
-`export NVM_DIR="$HOME/.nvm"`
- `[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"`
* **Verify Installation**
- `command -v nvm`
- `nvm -v`
* **Download latest node**
- `nvm install node`
* **Use Node**
- `nvm use node`
## Installation
* `git clone ` this repository
* change into the new directory
* `npm install`
## Running / Development
* `npm start`
### Running Tests
* `npm run test`
### Building
* ` npm run build` (production)
### Creating portal
```
import {AfterViewInit, ApplicationRef, Component, ComponentFactoryResolver, Injector, OnDestroy, ViewChild} from '@angular/core';
import {CdkPortal, DomPortalHost} from '@angular/cdk/portal';
@Component({
selector: 'app-action',
template: `
`,
})
export class ActionComponent implements AfterViewInit, OnDestroy {
@ViewChild(CdkPortal) portal;
private host: DomPortalHost;
constructor(
private componentFactoryResolver: ComponentFactoryResolver,
private applicationRef: ApplicationRef,
private injector: Injector
) {
}
ngAfterViewInit(): void {
this.host = new DomPortalHost(
document.querySelector('#action'),
this.componentFactoryResolver,
this.applicationRef,
this.injector
);
this.host.attach(this.portal);
}
ngOnDestroy(): void {
this.host.detach();
}
}
@Component({
selector: 'app-magic',
template: `
`
})
export class ButtonComponent implements AfterViewInit, OnDestroy {
@ViewChild(CdkPortal) portal: CdkPortal;
private host: PortalHost;
constructor(
private cfr: ComponentFactoryResolver,
private appRef: ApplicationRef,
private injector: Injector,
) {}
ngAfterViewInit(): void {
this.host = new DomPortalHost(
document.querySelector('#slot'),
this.cfr,
this.appRef,
this.injector
);
this.host.attach(this.portal);
}
ngOnDestroy() {
this.host.detach();
}
}
```
###
View [article](https://medium.com/@sumn2u/dynamic-ui-using-portals-in-angular-cdk-6051988b0f81)