The ngfor directive is not working properly

Question

I'm very new to Angular and I can't solve this issue. I'm working on a site designed by others and I have to display three cards under a banner in a page called api lab. So I created the api-lab component, where I initialize a list I want to display.

This is the important stuff in api-lab.component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-api-lab',
  templateUrl: './api-lab.component.html',
  styleUrls: ['./api-lab.component.scss']
})
export class ApiLabComponent implements OnInit {
  apiList: Array<ApiCategory>;
  apiTitle: string;
  apiDescription: string;
  landingBackgroundImage: string;
  accountInformationImage = '/assets/images/home/box_account-information.jpg';
  accountInformationIcon = '/assets/images/home/accountInformation_u.png';

  constructor() {
    ...
    });
  }
  ngOnInit() {
    this.createApiCAtegoryList();
  }
...
  createApiCAtegoryList() {}
}
...
class ApiCategory {}

This is the api-lab.component.html:

<div class="row">
  <div class="col-24 col-md-16 offset-md-4 col-xl-16 offset-xl-4">
    <hero-top [title]=apiTitle [description]=apiDescription [backgroundImage]=landingBackgroundImage
        [textSide]="'right'" [buttonEnabled]=true [buttonText]="'Get started'" [buttonLinkToPage]="'/get-started'">
    </hero-top>
  </div>
</div>
<div class="row mt-4">
  <div class="col-24 col-md-16 offset-md-4 col-xl-16 offset-xl-4">
    <div class="row no-guttter">

HERE:
        <div class="col-md-8 " *ngFor="let category of apiList">
            <api-lab-category-card [image]="category.image" [icon]="category.icon" [title]="category.title"
              [description]="category.description" [buttonLink]="category.buttonLink"></api-lab-category-card>
    </div>
  </div>
</div>
<div class="col-24 col-md-16 offset-md-4 col-xl-16 offset-xl-4">
</div>

When i load the page without the ngFor, I can see the banner normally. When I try to display the cards with ngFor, the entire site goes blank. As I told, I'm very new to Angular but I have to solve this problem to go on. If you need any detail I'll gladly provide you. Thanks for reading and help me.

Answer 1

the thing is you have not closed on div tag inside the api-lab.component.html file.

Just updated your code and added an unclosed div so please my copy my code into your file and this will work:)

Please don't forget to mark my question as a solution if it helps. Thanks

  <div class="col-24 col-md-16 offset-md-4 col-xl-16 offset-xl-4">
    <hero-top [title]=apiTitle [description]=apiDescription [backgroundImage]=landingBackgroundImage
      [textSide]="'right'" [buttonEnabled]=true [buttonText]="'Get started'" [buttonLinkToPage]="'/get-started'">
    </hero-top>
  </div>
</div>
<div class="row mt-4">
  <div class="col-24 col-md-16 offset-md-4 col-xl-16 offset-xl-4">
    <div class="row no-guttter">

      HERE:
      <div class="col-md-8 " *ngFor="let category of apiList">
        <api-lab-category-card [image]="category.image" [icon]="category.icon" [title]="category.title"
          [description]="category.description" [buttonLink]="category.buttonLink"></api-lab-category-card>
      </div>
    </div>
  </div>
</div>
<div class="col-24 col-md-16 offset-md-4 col-xl-16 offset-xl-4">
</div>