Examples of Angular Momentum

There are loads of examples. The best way to learn Angular is by example, and I have packed as many of them as I can into this POST. To maximize the number of examples in this POST, I have adopted a simple convention to avoid listing the contents of files over and over again. I’ll list the complete contents, just as I have in Listing 1-1. I include the name of the file in the listing’s header and the folder in which you should create it. When I make changes to the code, I show the altered statements in bold.

Listing 1-1. A Complete Example Document

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { ProductComponent } from "./component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { PaAttrDirective } from "./attr.directive";
@NgModule({
 imports: [BrowserModule, FormsModule, ReactiveFormsModule],
 declarations: [ProductComponent, PaAttrDirective],
 bootstrap: [ProductComponent]
})
export class AppModule { }

Don’t worry about what it does; just be aware that this is a complete listing, which shows the entire contents of the file. When I make a series of changes to the same file or when I make a small change to a large file, I show you just the elements that change, to create a partial listing. You can spot a partial listing because it starts and ends with an ellipsis (…), as shown in Listing 1-2.

Listing 1-2. A Partial Listing

...
<table class="table table-sm table-bordered table-striped">
 <tr><th></th><th>Name</th><th>Category</th><th>Price</th></tr>
 <tr *ngFor="let item of getProducts(); let i = index" pa-attr>
 <td>{{i + 1}}</td>
 <td>{{item.name}}</td>
 <td pa-attr pa-attr-class="bg-warning">{{item.category}}</td>
 <td pa-attr pa-attr-class="bg-info">{{item.price}}</td>
 </tr>
</table>
...

Listing 1-2 is a later listing. You can see that just the body element, and its content, is shown and that I have highlighted a number of statements. This is how I draw your attention to the part of the listing that has changed or emphasizes the part of an example that shows the feature or technique I am describing. In some cases, I need to make changes to different parts of the same file, in which case I omit some elements or statements for brevity, as shown in Listing 1-3.

Listing 1-3. Omitting Statements for Brevity

import { ApplicationRef, Component } from "@angular/core";
import { Model } from "./repository.model";
import { Product } from "./product.model";
import { ProductFormGroup } from "./form.model";
@Component({
 selector: "app",
 templateUrl: "app/template.html"
})
export class ProductComponent {
 model: Model = new Model();
 form: ProductFormGroup = new ProductFormGroup();
 // ...other members omitted for brevity...
 showTable: boolean = true;
}

This convention lets me pack in more examples, but it does mean it can be hard to locate a specific technique.