CODEWITHSUNDEEP
angularngfor
kamcknig
kamcknig

Reputation: 945

Angular2 *ngFor not displaying array data

I'm using Angular 5 and doing a crash course. I've actually gotten further than just using an ngFor directive, but I'm doing part of a practice assignment and one of the first things I'm trying to do won't loop to display data. I have other projecdts where it's working but this one doesn't and I'm baffled. Know it's something silly.

Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  subscriptions: ['Basic', 'Advanced', 'Pro'];
}

HTML Template

<div class="container">
  <div class="row">
    <div class="col-xs-12>
      <p *ngFor="let subscription of subscriptions">{{subscription}}</p>
    </div>
  </div>
</div>

Simple, yeah? I was actually putting it into an option element for a select input, but that didn't work and so I figured I'd try something even simpler and it still won't work. THe resultant html has this where the content would go, but I'm not versed enough to know what that really means.

thanks

Upvotes: 0

Views: 1704

Answers (2)

sameera lakshitha
sameera lakshitha

Reputation: 1981

You can display each array data in list Using *ngFor in Angular.

This array assign is wrong in your code.

export class AppComponent {
  subscriptions: ['Basic', 'Advanced', 'Pro'];
}

Array assign should be : 

export class AppComponent {
  subscriptions =  ['Basic', 'Advanced', 'Pro'];
}

more details

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222720

You need to assign the array value

 subscriptions =  ['Basic', 'Advanced', 'Pro'];

DEMO

Upvotes: 2

Related Questions