• Part 1: A simple crud
  • Installation
  • The generated app
  • The list of addresses
  • The detail
  • Editing the detail
  • Validation
• Part 2: A node.js express-based API
  • Setup Express
  • Simple handler
  • Handling pagination
• Part 3: Advanced material
  • Header and footer
  • Toolbar
  • Submenus
  • Using a Real API
  • The DataSource object

Code on github https://github.com/kendarorg/Angular101

Editing the detail

New items

Now we need to add a state to the component class to define when the whole thing will be editable

readonly = true;

edit(){
    this.readonly=false;
}

cancel(){
    this.readonly=true;
}

save(){
    this.readonly=true;
}

And some addition to the template fields. Notice the square brackets. With this approach we can insert code directly inside the template to define the expected behaviour

<input type="text" [(ngModel)]="address.name"
    [disabled]="readonly">

And the buttons to show what to do! Here we are introducing the *ngIf command that "render" the following part when the condition expression is verified

<span *ngIf="readonly">
    <button mat-icon-button  color="primary" (click)="edit()">
      <mat-icon>edit</mat-icon>
    </button>
    <button mat-icon-button  color="primary" routerLink="/address">
      <mat-icon>close</mat-icon>
    </button>
</span>
<span *ngIf="!readonly">
    <button mat-icon-button  color="primary" (click)="save()" >
      <mat-icon>save</mat-icon>
    </button>
    <button mat-icon-button  color="primary" (click)="cancel()">
      <mat-icon>cancel</mat-icon>
    </button>
</span>

Modify an existing item

Now first is needed a function to save the data on the service.

  public save(item:AddressElement){
        for(var  i=0;i< this.addresses.length;i++){
            if(this.addresses[i].id==item.id){
                this.addresses[i]=this.clone(item);
            }
        }
  }

And invoke that from the methods!

save(){
    this.readonly=false;
    this.dataService.save(address);
}

Now we can modify the items! Click on an item, modify it, close the detail and go back to the list. The item is modified!

Insert a new item

A first change is needed in the save() function in the service, to generate a new id. Notice that we are doing an upsert: insert new if the id is not set. In TS by default the value of an uninitialized field is "undefined"

  private getLastIndex(){
    var maxIndex = 0;
    for(var  i=0;i< this.addresses.length;i++){
        if(this.addresses[i].id>maxIndex){
            maxIndex= this.addresses[i].id;
        }
    }
    return maxIndex+1;
  }

  public save(item:AddressElement){
    if(item.id==undefined){
        item.id=this.getLastIndex();
        this.addresses.push(this.clone(item));
    }else{
        for(var  i=0;i< this.addresses.length;i++){
            if(this.addresses[i].id==item.id){
                this.addresses[i]=this.clone(item);
            }
        }
    }
  }

We can now add a new button on the addresses list template. Notice the usage of the "-1" parameter to inform the system that we are adding a new item!

<button mat-icon-button  color="primary" routerLink="/address/-1">
      <mat-icon>add</mat-icon>
</button>

Then we can proceed changing the SingleAddressComponent. When the id "-1" arrives, a new empty address is created and the state is directly set to "not readonly" modifying the constructor.

ngOnInit(): void {
    this.addressId = this.activatedRoute.snapshot.params.id;
    if(this.addressId==-1){
        this.address = {} as AddressElement;
        this.readonly = false;
    }else{
        this.address = this.dataService.getById(this.addressId);
    }
}

Now when saving the new item we go back to the "view" form. It would be better to go back to the list! We can use the this.activatedRoute.snapshot.params.id already present and modify accordingly cancel and save functions. But first we need to include the router!!

import { Router } from "@angular/router"

...
constructor(private activatedRoute: ActivatedRoute,
        public dataService: AddressesDataService,
        private router: Router) { 

And then the functions. Notice that i had choose to pass the redirect path as a parameter. This is to further isolate the presentation parts

  cancel(path:string){
    this.readonly=true;
    if(this.addressId==-1){
        this.router.navigateByUrl(path);
    }
  }

  save(path:string){
    this.dataService.save(this.address);
    this.readonly=true;
    if(this.addressId==-1){
        this.router.navigateByUrl(path);
    }
  }

Finally i need to add the parameter to the function calls inside the template

<span *ngIf="!readonly">
    <button mat-icon-button  color="primary" (click)="save('/address')" >
      <mat-icon>save</mat-icon>
    </button>
    <button mat-icon-button  color="primary" (click)="cancel('/address')">
      <mat-icon>cancel</mat-icon>
    </button>
</span>