Need help in multiple UI issues in Angular project with clarity framework

Question

Below is sample angular project which implements a sample Users Listing with datagrid row expand feature. Now as a standalone webapp, it is throwing error while navigating to next page as shown below:

If I comment the "" in parent component. the error will disappear.

Steps to run project:

prerequisite: 1. node.js version 6.9 or higher 2. npm install 3. npm install -g json-server

Run:

start json-server to get mock data and load local message bundles(cmd terminal #1) npm run json-server
run the plugin in dev mode and watches your files for live-reload (cmd terminal #2) ng serve
Problematic Code Files path "testplugin-ui\src\app\users*"

Here is the project seed with code https://drive.google.com/open?id=1Meeo_SXZEJfYyboihimJGr2DtJHeMP8k or https://nofile.io/f/q4FerHzV0Z0

As I need json-server, I'm uploading sample project instead of plunker/stackblitz. let me know what is wrong with this code.

See this:https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4 — Vikas, Mar 16 '18 at 16:48
@Vikas Thanks for the link. But what is the wrong with my code? — shravan, Mar 16 '18 at 17:41
oh that's ok. But please have a look when you get a chance once later. — shravan, Mar 16 '18 at 18:13

score 3 · Accepted Answer · answered Mar 17 '18 at 00:26

From Datagrid expandable rows additional features, it would seem you have the *clrIfExpanded directive in the wrong place.

user-row-detail.component.ts

<ng-template ngFor let-child [ngForOf]="children" *clrIfExpanded>
    <clr-dg-row-detail>
        <clr-dg-cell>{{child.username}}</clr-dg-cell>
        <clr-dg-cell>{{child.fullName}}</clr-dg-cell>
        <clr-dg-cell>{{child.role}}</clr-dg-cell>
    </clr-dg-row-detail>
</ng-template>

instead of

<ng-template ngFor let-child [ngForOf]="children">
    <clr-dg-row-detail *clrIfExpanded>
        <clr-dg-cell>{{child.username}}</clr-dg-cell>
        <clr-dg-cell>{{child.fullName}}</clr-dg-cell>
        <clr-dg-cell>{{child.role}}</clr-dg-cell>
    </clr-dg-row-detail>
</ng-template>

score 1 · Answer 2 · answered Mar 17 '18 at 13:16

@shravan,

There are quite a lot of problems with the code, including at least 35 Circular dependency warnings… Anyway, you might want to refactor your code, but for the time being, try changing your UserRowDetailComponent to this:

@Component({
  selector: 'user-row-detail',
  templateUrl: './user-row-detail.component.html',
  encapsulation: ViewEncapsulation.Emulated
})
export class UserRowDetailComponent implements OnInit, OnDestroy {
  @Input() children: Array<User>;

  constructor(private cd: ChangeDetectorRef) {
      console.log("calling UserRowDetailComponent Comp constructor!");
  }

  ngOnInit() {
    this.cd.detectChanges(); //Force change detection here
    console.log("calling detectChanges user-row-detail from OnInit!");
  }

  ngOnDestroy() {
      console.log("calling UserRowDetailComponent onDestroy!");
  }
}

As you can see, I have added a forced change detection. You might want to review the blog post suggested by @Vikas to understand what is going on here.

Need help in multiple UI issues in Angular project with clarity framework

2 Answers2