angula rtree

-

Angular Tree:

ts:

    entitiesTree = [
    {
      title: 'Backlog',
      child: [
        {
          title: '3A4 Backlog',
          child: [
            {
              title: '3A4 Backlog'
            }
          ]
        }
      ]
    },
    {
      title: 'Bill Of Material (BOM)',
      child: [
        {
          title: 'dummy title'
        }
      ]
    }
  ];

<div class="tree-box" *ngFor="let levelOne of entitiesTree;let index = index">
    <ng-container *ngTemplateOutlet="tree;context:{obj: levelOne}"></ng-container>
</div>

<ng-template #tree let-obj="obj">
    <div class="child-tree">
        <ul class="animateMe">
            <li>
                <span (click)="obj['collapse'] = !obj['collapse']" [ngClass]="{
                    'active': (obj?.child?.length && !obj['collapse']),
                    'icon-add-outline': (!obj['collapse']),
                    'icon-dc-power': (obj['collapse'])
                }"></span>
            </li>
            <li>
                <span class="pointer" (click)="getTreeDes(ob)">{{obj.title}}</span>
            </li>
        </ul>
        <ng-container *ngIf="obj.child && obj.child.length">
            <ng-container *ngFor="let leveltwo of obj.child;let i = index ">
                <ng-container *ngTemplateOutlet="tree;context:{obj: leveltwo}"></ng-container>
            </ng-container>
        </ng-container>
    </div>
</ng-template>

Comments

Post a Comment

Popular posts from this blog

Module Bundel

-
package.,json {    "name" :  " moduletutorial " ,    "version" :  " 1.0.0 " ,    "description" :  " creating module " ,    "main" :  " dom.js " ,    "scripts" : {      "test" :  " echo  \" Error: no test specified \"  && exit 1 " ,      "start" :  " webpack "   },    "author" :  "" ,    "license" :  " ISC " ,    "dependencies" : {      "webpack" :  " ^4.39.3 " ,      "webpack-cli" :  " ^3.3.8 "   } } webpack.config.js var   path   =   require ( " path " ); module . exports   =  {     entry: ' ./app.js ' ,     output: {         path:  path . resolve (__dirname),         filename:  ' main.js '     },     mode:  ' development ' }
Read more

Power of async and Promise

-
///////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////// Async //////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////// // const promise = fetch('https://jsonplaceholder.typicode.com/todos') // promise // .then(res => res.json()) // .then(data => console.log(data)) // .catch(err => console.log(err)) const getBlogs = async ( name ) => { const fruits = { " one " : " One 1 " , " two " : " Two 2 " , " three " : " Three 3 " } await delay ( 2000 ); return Promise . resolve ( fruits [ name ]); } // for small const makeMe = async () => { try {
Read more