I can’t use ngIf for some reason within my angular app. App for scaffolded from device management App.
Checked all imports as well and also Common module is used.
Anyone faced this before?
Hi @nakul_londhe,
Can you provide the html of your component, where you are using the ngIf directive?
Regards,
Tristan
<div>
<div class="row">
<!-- Table -->
<div class="col-md-6 col-xs-12">
<div class="card">
<div class="card-header separator">
<p class="card-title">INFO</p>
</div>
<table class="table table-striped">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tbody>
<tr>
<td class="info-column-heading">Model</td>
<td>3300</td>
</tr>
<tr>
<td class="info-column-heading">Serial</td>
<td>000002</td>
</tr>
<tr>
<td class="info-column-heading">Organization</td>
<td>CRM</td>
</tr>
<tr>
<td class="info-column-heading">Location</td>
<td>USA</td>
</tr>
<tr>
<td class="info-column-heading">Region</td>
<td>US & Territories</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Table -->
<div class="col-md-6 col-xs-12">
<div class="card">
<div class="card-header separator">
<p class="card-title">NOTES</p>
</div>
<div class="card-block">
<div class="textarea-container">
<textarea class="form-control custom-textarea"></textarea>
<span *ngIf="!editNotes" class="edit-icon">
<i class="dlt-c8y-icon-pencil" (click)="handleEditNotes()"></i>
</span>
<!-- <div *ngIf="editNotes" class="edit-icon">
hello
</div> -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="card">
<div class="card-header separator">
<p class="card-title">PROPERTIES</p>
</div>
<div class="card-block centered-text">
No Properties found
</div>
</div>
</div>
</div>
</div>
Thanks, the HTML looks fine, can you also provide the component’s ts file and the corresponding module?
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
// }),
// ],
It seems the DetailsComponent is missing in the declarations array of your module.
Yes , that’s missing i just saw that, my bad
DISCLAIMER==========This e-mail may contain privileged and confidential information which is the property of Persistent Systems Ltd. It is intended only for the use of the individual or entity to which it is addressed. If you are not the intended recipient, you are not authorized to read, retain, copy, print, distribute or use this message. If you have received this communication in error, please notify the sender and delete all copies of this message. Persistent Systems Ltd. does not accept any liability for virus infected mails.