view rendering from json using angular ngFor

It doesn' t work because you are not having any input property as nested in the recursion component. IMHO, you don't need as many input properties just each Child object will do.

Have something like:

App componenent

<ng-container *ngIf="nested.type==='unordered-list-item'">
    <li>{{nested.text}}</li>
    <ul *ngIf="nested.children.length > 0">
        <app-recursion *ngFor="let child of nested.children" [child]="child"></app-recursion>
    </ul>
</ng-container>

Recursion Component.

<ng-container *ngIf="child?.type==='unordered-list-item'">
  <li>{{child.text}}</li>
  <ng-container *ngIf="child.children?.length > 0">
    <ul>
            <app-recursion *ngFor="let subChild of child.children" [child]="subChild"></app-recursion>
    </ul>
  </ng-container>
</ng-container>

<ng-container *ngIf="child?.type==='ordered-list-item'">
  <li>{{child.text}}</li>
  <ng-container *ngIf="child.children?.length > 0">
    <ol>
            <app-recursion *ngFor="let subChild of child.children" [child]="subChild"></app-recursion>
    </ol>
  </ng-container>
</ng-container>

See an example here: https://stackblitz.com/edit/angular-qzezhp?file=src%2Fapp%2Frecursion%2Frecursion.component.html

EDIT

With the current logic, list type is being decided by the parent, for example, if the last child in the root has type: "ordered-list-item" and its children are of type unordred-list-item then still ordered lists are generated with something like:

<ng-container *ngIf="child?.type==='ordered-list-item'">
  <li>{{child.text}}</li>
  <ng-container *ngIf="child.children?.length > 0">
    <ol>  <-- even though children are un-ordered
            <app-recursion *ngFor="let subChild of child.children" [child]="subChild"></app-recursion>
    </ol>
  </ng-container>
</ng-container>

Solution:

Have another property in each object which tells about the children type, I have named that property as childrenType and used with a dummy data, you will jhave to write your logic to add this property dynamically.

Once this has been done:

You can have something like this in your Recursion component.

  <li>{{child.text}}</li>
    <ng-container *ngIf="child.children?.length > 0">
        <ul *ngIf="child.childrenType==='unordered-list-item'">
            <app-recursion *ngFor="let subChild of child.children" [child]="subChild"></app-recursion>
        </ul>
    <ol *ngIf="child.childrenType==='ordered-list-item'">
      <app-recursion *ngFor="let subChild of child.children" [child]="subChild"></app-recursion>
    </ol>
    </ng-container>

See a revised example here: https://stackblitz.com/edit/angular-list-component-4kmets?file=src/app/app.component.ts

change or remove condition in recursion component: *ngIf="nested.type==='unordered-list-item'"

  <ng-container>
      <li>{{text}}</li>
    </ng-container>

The thing is that the type of inner children is ordered (not unordered). So, just change the Recursion Component to :

<ng-container *ngIf="nested.type==='ordered-list-item'">
<li>{{text}}</li>
</ng-container>

Send data into your app-recursion component from nested.children array.

So app.component.html should look like this:

<ng-container *ngIf="nested.type==='unordered-list-item'">
    <li>{{nested.text}}</li>    
    <ul *ngIf="nested.children.length > 0">     
    <app-recursion [children]="nested.children"></app-recursion>
    </ul>
</ng-container>

And then use *ngFor in recursion.component.html:

<ng-container >
  <li *ngFor="let child of children" >
      {{child.text}}
  </li>
</ng-container>