In this Introduction to Angular Directive, we are going to look at the Angular Directives. We will look at three types of directives that Angular supports like Component, Structural and Attribute Directives. We also look at the few of the most commonly used Angular directives.
Angular ngFor directive iterates over a collection of data like an array, list, etc and create an HTML element for each of the items from an HTML template. It helps us to build lists or tables to display tabular data in a nice way. In this tutorial, we will look at the syntax and how to use ngFor to display a list of movies using example code. The ngFor also exports several local variables like Index, First, Last, odd, and even. We demonstrate the use of local variables by creating a simple code to Format odd & even rows of a table by assigning different classes to them. Finally, we look at the trackBy clause, which enhances the performances of the ngFor.
In this tutorial, we look at how to add a Child Component to our Angular 2 application. In our how to create Angular 2 Application, we created an AppComponent, which is a root component of our application.The AppComponent is bootstrapped in the app.module.ts file and loaded in the index.html file using the directive
In this tutorial, we are going to look at the How Data Binding works in Angular with examples. Angular Components are useless if they do not show any dynamic data. They also need to respond to user interactions and react to events. The data binding keeps both components & views in sync with each other. There are many ways to bind data in Angular like Interpolation, Property Bindings, Event Bindings & Two Way Bindings. We also learn how to use the ngModel directive to achieve the two-way binding in Angular Forms.
In this tutorial, we are going to look at Angular Components. We will look at the building blocks of the components and the important metadata properties of Angular Components like selector, template, styleURL, etc. We will build a Hello World App in Angular and show you how create a Angular Component (HelloWorldComponent) .
