Sure, here’s the code
import { Component, OnInit } from '@angular/core';
@Component({
selector: "app-details",
templateUrl: "./details.component.html",
styleUrls: ['./details.component.css']
})
export class DetailsComponent {
constructor() {}
editNotes: boolean = false
handleEditNotes() {
this.editNotes = true
console.log({editnotes:this.editNotes})
}
ngOnInit() {
this.editNotes = false;
}
}
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { RouterModule as NgRouterModule } from "@angular/router";
import { UpgradeModule as NgUpgradeModule } from "@angular/upgrade/static";
import { CoreModule, HOOK_NAVIGATOR_NODES, HOOK_ROUTE, NavigatorService, RouterModule, ViewContext, hookNavigator, hookRoute } from "@c8y/ngx-components";
import { AssetsNavigatorModule } from "@c8y/ngx-components/assets-navigator";
import { SubAssetsModule } from "@c8y/ngx-components/sub-assets";
import { ChildDevicesModule } from "@c8y/ngx-components/child-devices";
import { DeviceProfileModule } from "@c8y/ngx-components/device-profile";
import { DeviceShellModule } from "@c8y/ngx-components/device-shell";
import { DeviceListModule } from "@c8y/ngx-components/device-list";
import { OperationsModule } from "@c8y/ngx-components/operations";
import { ImpactProtocolModule } from "@c8y/ngx-components/protocol-impact";
import { OpcuaProtocolModule } from "@c8y/ngx-components/protocol-opcua";
import { RepositoryModule } from "@c8y/ngx-components/repository";
import { ServicesModule } from "@c8y/ngx-components/services";
import { TrustedCertificatesModule } from "@c8y/ngx-components/trusted-certificates";
import {
DashboardUpgradeModule,
HybridAppModule,
UpgradeModule,
UPGRADE_ROUTES,
} from "@c8y/ngx-components/upgrade";
import { BinaryFileDownloadModule } from "@c8y/ngx-components/binary-file-download";
import { SearchModule } from "@c8y/ngx-components/search";
import { LpwanProtocolModule } from "@c8y/ngx-components/protocol-lpwan";
import {
DeviceManagementHomeDashboardModule,
DeviceInfoDashboardModule,
} from "@c8y/ngx-components/context-dashboard";
import { RegisterDeviceModule } from "@c8y/ngx-components/register-device";
import { SigfoxDeviceRegistrationModule } from "@c8y/ngx-components/sigfox-device-registration";
import { ActilityDeviceRegistrationModule } from "@c8y/ngx-components/actility-device-registration";
import { LoriotDeviceRegistrationModule } from "@c8y/ngx-components/loriot-device-registration";
import { DiagnosticsModule } from "@c8y/ngx-components/diagnostics";
import { Lwm2mModule } from "@c8y/ngx-components/protocol-lwm2m";
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { HelloComponent } from "./hello/hello.component";
import { NavigationRearrangeService } from "./factories/navigationRearrangeService";
import { ExampleNavigationFactory } from "./factories/Navigation";
import { FilesComponent } from "./Devices/Files/files.component";
import { DetailsComponent } from "./Devices/Details/details.component";
import { SoftwareComponent } from "./Devices/Software/software.component";
@NgModule({
imports: [
// Upgrade module must be the first
UpgradeModule,
BrowserAnimationsModule,
RouterModule.forRoot(),
NgRouterModule.forRoot(
[{ path: "hello", component: HelloComponent }, ...UPGRADE_ROUTES],
{
enableTracing: false,
useHash: true,
}
),
CoreModule.forRoot(),
AssetsNavigatorModule.config({
smartGroups: true,
}),
OperationsModule,
OpcuaProtocolModule,
ImpactProtocolModule,
TrustedCertificatesModule,
NgUpgradeModule,
DashboardUpgradeModule,
RepositoryModule,
DeviceProfileModule,
BinaryFileDownloadModule,
SearchModule,
ServicesModule,
LpwanProtocolModule,
SubAssetsModule,
ChildDevicesModule,
DeviceManagementHomeDashboardModule,
DeviceInfoDashboardModule,
RegisterDeviceModule,
SigfoxDeviceRegistrationModule,
ActilityDeviceRegistrationModule,
LoriotDeviceRegistrationModule,
DeviceShellModule,
DiagnosticsModule,
DeviceListModule,
Lwm2mModule,
BrowserModule,
CommonModule
],
declarations: [HelloComponent],
entryComponents: [HelloComponent],
providers: [
hookRoute({
path: "",
component: HelloComponent,
}),
hookNavigator({
priority: 5000,
path: "/hello",
icon: "rocket",
label: "Hello",
}),
{
provide: HOOK_ROUTE,
useValue: [{
context: ViewContext.Device,
path: 'details',
component: DetailsComponent,
label: 'Details',
priority: Infinity,
icon: 'align-justify'
},
],
multi: true
},
{
provide: HOOK_ROUTE,
useValue: [{
context: ViewContext.Device,
path: 'softwareData',
component: SoftwareComponent,
label: 'Software',
priority: -1000,
icon: 'gears'
},
],
multi: true
},
{
provide: HOOK_ROUTE,
useValue: [{
context: ViewContext.Device,
path: 'files',
component: FilesComponent,
label: 'Files',
priority: -1001,
icon: 'folder-open'
},
],
multi: true
},
NavigationRearrangeService,
{ provide: NavigatorService, useExisting: NavigationRearrangeService },
{ provide: HOOK_NAVIGATOR_NODES, useClass: ExampleNavigationFactory, multi: true }
],
})
export class AppModule extends HybridAppModule {
constructor(protected upgrade: NgUpgradeModule) {
super();
}
}
// providers: [
// hookRoute({ // 1
// path: "",
// component: HelloComponent,
// }),
// hookNavigator({ // 1, 2
// priority: 5000,
// path: "/hello", // 3
// icon: "rocket",
// label: "Hello", // 4
// }),
// ],