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:

1. start json-server to get mock data and load local message bundles(cmd terminal #1) npm run json-server
2. run the plugin in dev mode and watches your files for live-reload (cmd terminal #2) ng serve
3. 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.

Answer 1

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>