Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Angular 8 *ngFor Directive

Angular 8 ngFor Directive

The *ngFor directive is used to repeat to repeat a portion of HTML template once per each item from an iterable list (collection). The ngFor is an Angular structural directive and is similar to ngRepeat in AngularJS. Some local variables like Index, First, Last, odd and even are exported by *ngFor directive.

Syntax of ngFor

  • ….
  • Angular 8 ngFor Directive

    How to use ngFor Directive?

    To use ngFor Directive, we have to create a block of HTML elements, which can display a single item of the items collection. After that, we can use the ngFor Directive to tell angular to repeat that block of HTML elements for each item in the list.

    The ngFor Directive has a different syntax from other directives we've seen. If we familiar with the ngFor statement, we will notice that they are identical.

    Angular 8 ngFor Directive Syntax

    Example for *ngFor Directive

    Firstly, we have to create angular Application. After that, open the app.component.ts and add the following code.

    The following code contains a list of Top 3 movies in a movies array. Let’s build a template to display these movies in a tabular form.

    import { Component } from '@angular/core';
    @Component({
    selector: 'movie-app',
    templateUrl:'./app/app.component.html', 
    styleUrls:['./app/app.component.css'] 
    }) 
    export class AppComponent  
    {  
    title: string ="Top 10 Movies" ; 
    movies: Movie[] =[ 
    {title: 'Winter Is Coming',director: 'Tim Van Patten',cast:'Idris Elba, 
    Ginnifer Goodwin, Jason Bateman',releaseDate:'March 4, 2016'}, 
    {title:'Batman v Superman: Dawn of Justice',director:'Zack Snyder',cast:
    'Ben Affleck, Henry Cavill, Amy Adams',releaseDate:'March 25, 2016'}, 
    {title:'Captain America: Civil War',director:'Anthony Russo, Joe Russo',cast:'
    Scarlett Johansson, Elizabeth Olsen, Chris Evans',releaseDate:'
    May 6, 2016'}, 
    {title:'X-Men: Apocalypse',director:'Bryan Singer',cast:'Jennifer Lawrence,
     Olivia Munn, Oscar Isaac',releaseDate:'May 27, 2016'}, 
    ] 
    }  
    class Movie { 
    title : string; 
    director : string; 
    cast : string; 
    releaseDate : string; 
    } 

    Now, open the app.component.html and add the following code:

     
    {{title}}
    Title Director Cast Release Date
    {{movie.title}} {{movie.director}} {{movie.cast}} {{movie.releaseDate}}

    When we run the applications, it will show the movies in tabular form.



    ADVERTISEMENT
    ADVERTISEMENT