src/app/apps/apps-add/apps-add.component.ts
Applications Add
| selector | app-apps-add |
| templateUrl | ./apps-add.component.html |
Properties |
Methods |
HostListeners |
constructor(router: Router)
|
||||||||
|
Constructor
Parameters :
|
| window:resize |
Arguments : '$event'
|
window:resize(event: )
|
| ngOnDestroy |
ngOnDestroy()
|
|
Destroy Unsubscribe subscription
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| update |
update()
|
|
Update states
Returns :
void
|
| isSmallDisplay |
isSmallDisplay:
|
Default value : false
|
|
Is Small display |
| radio |
radio:
|
Type : string
|
|
Radio model (current uri) |
| routerSubscription |
routerSubscription:
|
Type : Subscription
|
|
Router Subscription |
import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';
/**
* Applications Add
*
* @author Damien Vitrac
*/
@Component({
selector: 'app-apps-add',
templateUrl: './apps-add.component.html'
})
export class AppsAddComponent implements OnDestroy, OnInit {
/**
* Radio model (current uri)
*/
radio: string;
/**
* Router Subscription
*/
routerSubscription: Subscription;
/**
* Is Small display
* @type {boolean}
*/
isSmallDisplay = false;
/**
* Constructor
*
* @param {Router} router
*/
constructor(private router: Router) {
}
ngOnInit(): void {
this.radio = this.router.routerState.snapshot.url;
this.routerSubscription = this.router.events.subscribe((val: NavigationEnd) => {
if (val instanceof NavigationEnd) {
this.radio = val.url;
}
});
this.update();
}
/**
* Destroy
* Unsubscribe subscription
*/
ngOnDestroy(): void {
if (this.routerSubscription) {
this.routerSubscription.unsubscribe();
}
}
/**
* Listener on Resize Window
*/
@HostListener('window:resize', ['$event'])
onResize(event) {
this.update();
}
/**
* Update states
*/
update() {
this.isSmallDisplay = document.documentElement.clientWidth < 1200;
}
}
<app-page>
<div *ngIf="!isSmallDisplay || radio === '/apps/add'">
<app-page-head>
<app-page-head-back [defaultUrl]="'/apps'" [isNotRegex]="'^(\/apps\/)'"></app-page-head-back>
<app-page-head-title><strong>Add Application(s)</strong></app-page-head-title>
</app-page-head>
<div class="page-step page-step-1">
<div class="page-step-content">
<p style="margin-bottom:0">
You can <strong>Import</strong> or <strong>register applications</strong> your application(s).
</p>
</div>
<ul class="step">
<li role="presentation" routerLinkActive="active">
<a routerLink="register">
<input type="radio" [(ngModel)]="radio" value="/apps/add/register"/>
<strong>Register one or more applications</strong> coordinates by entering a Name, Type and URI of the
application.
</a>
</li>
<li role="presentation" routerLinkActive="active">
<a routerLink="import-from-uri">
<input type="radio" [(ngModel)]="radio" value="/apps/add/import-from-uri"/>
<strong>Bulk import application</strong> coordinates from an HTTP URI location.
</a>
</li>
<li role="presentation" routerLinkActive="active">
<a routerLink="import-from-properties">
<input type="radio" [(ngModel)]="radio" value="/apps/add/import-from-properties"/>
<strong>Bulk import application</strong> coordinates from a properties file.
</a>
</li>
</ul>
</div>
</div>
<div [class.page-step]="!isSmallDisplay" [class.page-step-2]="!isSmallDisplay">
<div class="page-step-content">
<router-outlet></router-outlet>
</div>
</div>
</app-page>