CODEWITHSUNDEEP
angularngforangular2-databinding
user7805277
user7805277

Reputation:

Angular - Data Binding with ngFor directive

I am new to angular and I'm not sure of how to render data as HTML markup. How can I show the component data inside of the component template?

There is a small reproduction in this plnkr.

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

@Component({
  selector: 'my-app',
  template: `<ul class= "master">
                <li *ngFor ="let student of liArraycontent">  </li>
              </ul>`
})
export class AppComponent { 
  name = 'Angular';
  liArraycontent = ["testing 1", "testing 2", "testing3"]


}

Upvotes: -2

Views: 657

Answers (2)

Jota.Toledo
Jota.Toledo

Reputation: 28434

To show information from your data source (component class) in your template (html code) you need to use interpolation. You can do this by using the double curly brace syntax {{}} inside of your template. By doing that, you will automatically bind the data in one direction: data source to template. That means, if the data changes in the data source, the changes will be reflected in your template.

I would recommend u to read the following section of the docs: https://angular.io/docs/ts/latest/guide/template-syntax.html

Hope it helps!

Upvotes: 1

joshsisley
joshsisley

Reputation: 310

So inside of your code for the list just do this: 

<li *ngFor ="let student of liArraycontent">{{student}}</li>

And similarly if you had an array of objects you could just do {{student.name}} or any other attributes for the object

Upvotes: 2

Related Questions