ANGULAR2 built-in instructions Ngfor and ngif detailed _angularjs

In this section, we'll learn how to use ANGULAR2 to show the data, and how to use its built-in directives NgFor andNgIf

First make sure you have a ANGULAR2 sample program that you can run, preferably the QuickStart small project that we completed in the previous chapter, or the QuickStart project that you completed on the website above, because our explanation is on that basis; Then let's start the happy journey below.

Because our series of articles are used, TypeScript so before you look at the following content you'd better have a look at TypeScript or ES6 classes, their URLs are typescript,es6; If you've ever studied a similar object-oriented language like Java or C + +, Then it's easy to learn the classes here, which are basically similar to the classes in those languages.

In the previous section we app.component.ts exported an empty class, so we're going to start filling it up and make it plump. First, we add three attributes to the Appcomponent Class (component), which is Name,age,fruit, as follows:

Export class Appcomponent {
  username = ' dreamapple ';
  Age =;
  Fruit = ' Apple '
}

The above writing is just a shorthand form, in fact, the complete formulation should be this:

Export class Appcomponent {
  //username = ' dreamapple ';
  Age =;
  Fruit = ' Apple '
  username:string;
  Age:number;
  fruit:string;

  Constructor () {
    this.username = ' dreamapple ';
    This.age =;
    This.fruit = ' Apple ';
  }

And then we're going to modify our template because we're going to use more HTML in the template, so we're going to use inverted quotes to wrap our HTML fragment, and our adorner function looks like this:

@Component ({
  selector: ' My-app ',
  Template: '
    <p>my name is: {{username}}</p>
    <p >my age are: {{age}}</p>
    <p>my favorite fruit is: {{fruit}}</p>
  '
})

Of course, we can also use the Templateurl configuration option of the metadata object in the adorner function, as follows:

@Component ({
  selector: ' My-app ',
  //template: '
  //  <p>my name is: {{username}}</p>
  / /  <p>my age are: {{age}}</p>
  //  <p>my favorite fruit is: {{fruit}}</p>
  //
  templateurl: ' app/templates/app-template.html '
})

Where app/templates/app-template.html represents the program's root directory app (not angular2-travel) under the Templates folder under the App-template.html file, Then we can copy the HTML fragment we wrote before.

From the above process, we can see that the ANGULAR2 display data is still using the Angular1 idiomatic double braces; it's an interpolation symbol, where the interpolation symbol appears where we want to display the data. Next we're going to learn to use the built-in instructions for Ngfor, Students who are familiar with ANGULAR1 should be able to use this instruction easily, because ngfor and ng-repeat are basically the same; it is used to loop through an iterative object, typically an array.

Next we add a property fruitslist to Appcomponent, as follows:

Export class Appcomponent {
  username = ' dreamapple ';
  Age =;
  Fruitslist = [' Apple ', ' orange ', ' pear ', ' banana '];
  Fruit = this.fruitslist[0]; Here to use this.fruitslist[0]
}

What we need to be aware of is that there is a comment place, we have to use this.fruitslist to refer to the attributes we have defined above, and if we use fruitslist, angular don't know what it means.
Next we're going to loop through the fruit array and see how it's represented in the template.

@Component ({
  selector: ' My-app ',
  Template: '
    <p>my name is: {{username}}</p>
    <p> My age are: {{age}}</p>
    <ul>
      <li *ngfor= "Let Fruit of fruitslist" >{{fruit}}</li>
    </ul>
    <p>my Favorite fruit is: {{fruit}}</p>
  '
})

There are several places in the above code that need attention, first we use the *ngfor instead of the ngfor, where the * is not able to remove, if removed then our program will not error, but we only loop out the first item of the array. about why we need to add *, You can look at the template syntax in more detail, and of course we can write something that will help us to show each index after the *ngfor expression, as follows:

<li *ngfor= "let fruit of fruitslist; Let i = index; " >{{i}}-{{fruit}}</li>
The template code above has some areas to look at, the first thing to know is that the *ngfor is followed by an expression, so we can write some simple expressions to help us better loop, and we use let keyword, add block scope, so that our variables are limited to * Ngfor this loop block. Well, if you want to learn more about *ngfor, you can look at the official API for Ngfor.

The instructions to be introduced next are ngif, and of course this instruction is essentially similar to the ANGULAR1 's ng-if instruction, depending on the value of the following expression to decide whether to add or remove an element from the DOM.

See how we use this directive in the template:

<p *ngif= "Fruitslist.length > 3" >fruitslist ' s length is bigger than
<p *ngif= "Fruitslist.length <= 3" >fruitslist ' s length is not bigger than
The first thing to point out is that, like using *ngfor, we use *ngif, and then we can write an expression after *ngif, which is expected to return the result to a Boolean value; The ngif instruction determines whether or not to add or remove this element from the DOM based on the value of the expression.

Now that we're using typescript, we can use a lot of new features, like using classes to build an instance, and then we'll use the fruit class to build our fruit example. First we create a new folder under the App folder, call it classes, Then we create a fruit.ts file, where we write the code for the Fruit class:

Export class fruit{
  constructor (public
    name:string, public
    price:number
  ) {}
}

To explain the code above, we used the constructor and then declared two properties of the object in the constructor; one is name, the other is price, we use the name:string in the constructor, and price: Number parameter to create and initialize the properties of this object. Next we can use this class in our program;

First of all, introduce this class in App.component.ts:

Import {Fruit} from './classes/fruits ';
Then use the fruit class in appcomponent to initialize our list of fruits:

Export class Appcomponent {
  username = ' dreamapple ';
  Age =;
  Fruitslist = [
    new Fruit (' Apple '),
    new Fruit (' Orange '), new
    Fruit (' pear ', '),
    new Fruit (' Banana ', m)
  ];
  Noinspection typescriptunresolvedvariable
  fruit = this.fruitslist[0].name//Here to use This.fruitslist[0]
}

And then we have to change our template:

Copy Code code as follows:

<li *ngfor= "let fruit of fruitslist; Let i = index; " >{{i}}-{{fruit.name}}-{{fruit.price}}</li>

The final result should be the following:

Finally have to say, whether it is ES6, or typescript all let me feel a kind of write Java feeling, this is also pros and cons, the advantage is definitely to increase the readability of the code, so that the program easier to maintain, but also easier to write large projects, so that teamwork is also very convenient; Of course, there are some deficiencies, the main problem is to increase the cost of learning; Of course, everything looks forward.