How to use *ngFor to show rows of data in Angular

Question

I am trying to use * ngFor to create new "rows" as new categories are being added.

The problem is that when running the program, I do not receive any error but also do not get the intended. I've tried to add a few things, but everything under in * ngFor not "running" ... can anyone help me?

  GetCategory() {

    var self = this;
    this.Global.refreshToken().subscribe(function (result) {
      self.uploadService.getCategory().then(function (resultado) {

        if (resultado) {

          // self.category = resultado; 
          var categories = JSON.parse(resultado);
         // console.log(categories);

        } else {

        }
      }).catch();
    });
  }

 <div class="bodyPermCardDam">
    <div *ngFor="let category of categories; let i = index">
        <ng-template>
            <div class="categoryChoosedName catParm{{category.ID}}" (click)="SelectCategoryPerm(category.ID,1)">
                <svg class="folder" id="folder{{category.ID}}" xmlns="http://www.w3.org/2000/svg" width="24" height="19.2" viewBox="0 0 24 19.2">
                    <style type="text/css">
                        .folder:hover .stSpecial,
                        .folder:active .stSpecial {
                            fill: #4981C2 !important;
                        }

                        .stSpecial {
                            transition: all 0.3s ease 0s;
                        }
                    </style>
                    <g transform="translate(-32 -92)">
                        <g transform="translate(28 84)">
                            <path class="stSpecial" d="M13.6,8H6.4a2.389,2.389,0,0,0-2.388,2.4L4,24.8a2.4,2.4,0,0,0,2.4,2.4H25.6A2.4,2.4,0,0,0,28,24.8v-12a2.4,2.4,0,0,0-2.4-2.4H16Z" fill="#caced5" />
                        </g>
                    </g>
                </svg> {{category.Name}}
            </div>        
        </ng-template>
    </div>
</div>

Answer 1

Remove ng-template and your code should show results inside *ngFor. That's how <ng-template> works.

You need ng-container to render ng-template. Check this out

 <div class="bodyPermCardDam">
    <div *ngFor="let category of categories; let i = index">
            <div class="categoryChoosedName catParm{{category.ID}}" (click)="SelectCategoryPerm(category.ID,1)">
                <svg class="folder" id="folder{{category.ID}}" xmlns="http://www.w3.org/2000/svg" width="24" height="19.2" viewBox="0 0 24 19.2">
                    <style type="text/css">
                        .folder:hover .stSpecial,
                        .folder:active .stSpecial {
                            fill: #4981C2 !important;
                        }

                        .stSpecial {
                            transition: all 0.3s ease 0s;
                        }
                    </style>
                    <g transform="translate(-32 -92)">
                        <g transform="translate(28 84)">
                            <path class="stSpecial" d="M13.6,8H6.4a2.389,2.389,0,0,0-2.388,2.4L4,24.8a2.4,2.4,0,0,0,2.4,2.4H25.6A2.4,2.4,0,0,0,28,24.8v-12a2.4,2.4,0,0,0-2.4-2.4H16Z" fill="#caced5" />
                        </g>
                    </g>
                </svg> {{category.Name}}
            </div>        
    </div>
</div>